How to integrate and configure Polly.js with WebdriverIO?

Question

So, I have been using webdriverIO. I noticed recently, there was support for puppeteer instead of using the typical selenium webdriver.

I have configured my e2e tests to use puppeteer now instead after installing some packages, and configuring the wdio.conf.js file.

So with puppeteer, it opens the door for support of intercepting requests and mocking a response before page load. I would like to use a tool like Polly.js to do the request interception and mocking. So I was wondering does anyone have an example implementation of how this is done? or. steps to do this?

I have a working model of this done using Codecept.js and puppeteer, and polly.js. But I'm trying to move away from Codecept.js and use WebdriverIO. So, I know the support is there.

Answer 1

To integrate and configure Polly.js with WebdriverIO, follow these steps:

1 Install the polly-js npm package in your project:

npm install --save-dev polly-js

2 Add the Polly.js middleware to your WebdriverIO setup. You can do this by creating a polly.js file in your project, and using it to start the Polly instance before each test, and stop it after each test:

const Polly = require('polly-js');

module.exports = {
  before: function (browser, done) {
    this.polly = new Polly('Polly Recording', {
      adapters: [Polly.adapter.puppeteer(browser.puppeteer)]
    });
    done();
  },
  after: function (browser, done) {
    this.polly.stop();
    done();
  }
};

3 In your WebdriverIO configuration file (wdio.conf.js), add the polly.js file as a custom middleware:

exports.config = {
  // ... other configurations
  before: function (capabilities, specs) {
    require('./polly.js').before(this, capabilities, specs);
  },
  after: function (result, capabilities, specs) {
    require('./polly.js').after(this, result, capabilities, specs);
  },
  // ... other configurations
};

4 In your WebdriverIO test files, use the Polly.js instance to intercept and mock requests:

// ... other imports
const Polly = require('polly-js');

describe('My Test Suite', function () {
  it('intercepts and mocks a request', function () {
    const polly = this.polly;

    polly
      .recordingName('Test Request')
      .server(server => {
        server.get('/api/test').intercept((req, res) => {
          res.json({ message: 'Hello from Polly.js' });
        });
      })
      .play();

    browser.url('/');

    // ... other test steps
  });
});

This should give you a basic implementation of Polly.js with WebdriverIO. You can then customize the Polly instance and use it to intercept and mock requests in your tests.