Record Selenium requests made to REST APIs

Question

Record Selenium requests made to REST APIs

When conducting integration tests using Selenium as the test runner and the webdriver.io JavaScript library for the Selenium API, my testing scenario involves loading an HTML page and clicking on a button. I am specifically aiming to verify whether a GET REST call was made.

While exploring options, I came across a webdriver.io plugin called webdriverajax that purportedly aligns with my needs. Unfortunately, it does not seem to work as expected.

Does anyone have suggestions on how to effectively capture REST calls in this testing environment?

javascript rest selenium webdriver-io

Answer 1

Answer №1

To achieve this functionality, you can create a separate custom HttpClient class outside of your Selenium code. Selenium itself does not have built-in support for this type of feature.

For example, you can set up a scenario where clicking a button triggers a call to a REST service. You can extract the URL from an element in the HTML DOM and then use custom code to verify if the URL is reachable or not. Depending on the status code received or another criteria you define, you can determine whether the test has passed or failed.

Sample Code: FileDownloader.java

private String downloader(WebElement element, String attribute) throws IOException, NullPointerException, URISyntaxException {
        // implementation details here
    }

TestClass.java

@Test
public void downloadAFile() throws Exception {
       // testing logic here
    }

Here is a reference link for further information.

Note: While this may not perfectly align with your requirements, it can serve as a starting point that you can adapt to suit your specific needs.

You can also explore using BrowserMob Proxy to achieve similar functionalities.

Answer 2

To achieve this functionality, you can create a separate custom HttpClient class outside of your Selenium code. Selenium itself does not have built-in support for this type of feature.

For example, you can set up a scenario where clicking a button triggers a call to a REST service. You can extract the URL from an element in the HTML DOM and then use custom code to verify if the URL is reachable or not. Depending on the status code received or another criteria you define, you can determine whether the test has passed or failed.

Sample Code: FileDownloader.java

private String downloader(WebElement element, String attribute) throws IOException, NullPointerException, URISyntaxException {
        // implementation details here
    }

TestClass.java

@Test
public void downloadAFile() throws Exception {
       // testing logic here
    }

Here is a reference link for further information.

Note: While this may not perfectly align with your requirements, it can serve as a starting point that you can adapt to suit your specific needs.

You can also explore using BrowserMob Proxy to achieve similar functionalities.

Answer 3

Answer №2

The issue arose from the incompatible webdriver.io version. It seems that webdriverajax functions properly only with v3.x of webdriver.io and not with v4.x, which is what I was using - v4.5.2.

Instead of relying on a plugin, I opted to create a mock for the window.XMLHttpRequest open and send methods. Here's how I did it:

proxyXHR() {
  this.browser.execute(() => {
    const namespace = '__scriptTests';
    window[namespace] = { open: [], send: [] };
    const originalOpen = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (...args) {
      window[namespace].open.push({
        method: args[0],
        url: args[1],
        async: args[2],
        user: args[3],
        password: args[4]
      });
      originalOpen.apply(this, [].slice.call(args));
    };
    window.XMLHttpRequest.prototype.send = function (...args) {
      window[namespace].send.push(JSON.parse(args[0]));
    };
  });
}

getXHRsInfo() {
  const result = this.browser.execute(() => {
    const namespace = '__scriptTests';
    return window[namespace];
  });
  return result.value;
}

Answer 4

The issue arose from the incompatible webdriver.io version. It seems that webdriverajax functions properly only with v3.x of webdriver.io and not with v4.x, which is what I was using - v4.5.2.

Instead of relying on a plugin, I opted to create a mock for the window.XMLHttpRequest open and send methods. Here's how I did it:

proxyXHR() {
  this.browser.execute(() => {
    const namespace = '__scriptTests';
    window[namespace] = { open: [], send: [] };
    const originalOpen = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (...args) {
      window[namespace].open.push({
        method: args[0],
        url: args[1],
        async: args[2],
        user: args[3],
        password: args[4]
      });
      originalOpen.apply(this, [].slice.call(args));
    };
    window.XMLHttpRequest.prototype.send = function (...args) {
      window[namespace].send.push(JSON.parse(args[0]));
    };
  });
}

getXHRsInfo() {
  const result = this.browser.execute(() => {
    const namespace = '__scriptTests';
    return window[namespace];
  });
  return result.value;
}

Record Selenium requests made to REST APIs

Answer №1

Answer №2

Similar questions

drawing tool with JavaScript and HTML5

How can I find out the identification of the control that is already linked to the element?

There is no output from the Selenium JavascriptExecutor command

Exploring touch events and input focusing on mobile devices using JavaScript

What are the top methods for interacting between Server APIs and Client-Side JavaScript?

Display Vue component before fetching data

Checking the status of a mongos connection in Node.js: A simple guide

Using Express and React with Socket.io

Crafting a template for mixing up images and quotes without any specific connection - here's how!

Turn off specific default features within Sails.js

What is the best way to connect a series of checkboxes within a form utilizing Angular?

Retrieving Information from API using Vue.js

Error: HTML code being displayed instead of form value in Ajax request output

Retrieving data from a collection with the find() method in a custom date format

Using Vue.js with the slot-in attribute

What steps should I take to make sure that the types of React props are accurately assigned?

Images of the captured screens are connected with the cucumber reports at a local level, however, they are not linked

Guide to Appending "Z" to a Date String Using Moment.js in JavaScript and Node.js

Running a Selenium script in Firefox fails when executed with sudo privileges

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)