mock

Mock the response of a request. You can define a mock based on a matching glob and corresponding header and status code. Calling the mock method returns a stub object that you can use to modify the response of the web resource.

With the stub object you can then either return a custom response or have the request fail.

There are 3 ways to modify the response:

  • return a custom JSON object (for stubbing API request)
  • replace web resource with a local file (service a modified JavaScript file) or
  • redirect resource to a different url
info

Note that using the mock command requires support for Chrome DevTools protocol and e.g. can not be used when running automated tests in the cloud. Find out more in the Automation Protocols section.

Usage#
browser.mock(url, { method, headers, responseHeaders, postData, statusCode })
Parameters#
NameTypeDetails
urlStringurl to mock
filterOptions
optional
MockFilterOptionsfilter mock resource by additional options
filterOptions.method
optional
String, Functionfilter resource by HTTP method
filterOptions.headers
optional
Object, Functionfilter resource by specific request headers
filterOptions.responseHeaders
optional
Object, Functionfilter resource by specific response headers
filterOptions.postData
optional
String, Functionfilter resource by request postData
filterOptions.statusCode
optional
Number, Functionfilter resource by response statusCode
Example#
mock.js
it('should mock network resources', () => {
// via static string
const userListMock = browser.mock('**' + '/users/list')
// you can also specifying the mock even more by filtering resources
// by request or response headers, status code, postData, e.g. mock only responses with specific
// header set and statusCode
const strictMock = browser.mock('**', {
// mock all json responses
statusCode: 200,
headers: { 'Content-Type': 'application/json' },
responseHeaders: { 'Cache-Control': 'no-cache' },
postData: 'foobar'
})
// comparator function
const apiV1Mock = browser.mock('**' + '/api/v1', {
statusCode: (statusCode) => statusCode >= 200 && statusCode <= 203,
headers: (headers) => headers['Authorization'] && headers['Authorization'].startsWith('Bearer '),
responseHeaders: (headers) => headers['Impersonation'],
postData: (data) => typeof data === 'string' && data.includes('foo')
})
})
it('should modify API responses', () => {
// filter by method
const todoMock = browser.mock('**' + '/todos', {
method: 'get'
})
// mock an endpoint with a fixed fixture
mock.respond([{
title: 'Injected Todo',
order: null,
completed: false,
url: "http://todo-backend-express-knex.herokuapp.com/916"
}])
// respond with different status code or header
mock.respond([{
title: 'Injected Todo',
order: null,
completed: false,
url: "http://todo-backend-express-knex.herokuapp.com/916"
}], {
statusCode: 404,
headers: {
'x-custom-header': 'foobar'
}
})
})
it('should modify text assets', () => {
const scriptMock = browser.mock('**' + '/script.min.js')
scriptMock.respond('./tests/fixtures/script.js')
})
it('should redirect web resources', () => {
const headerMock = browser.mock('**' + '/header.png')
headerMock.respond('https://media.giphy.com/media/F9hQLAVhWnL56/giphy.gif')
const pageMock = browser.mock('https://google.com/')
pageMock.respond('https://webdriver.io')
browser.url('https://google.com')
console.log(browser.getTitle()) // returns "WebdriverIO · Next-gen browser and mobile automation test framework for Node.js"
})