Mock

Mock the response of a request. You can define a mock based on a matching URLPattern 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 (serve a modified JavaScript file) or
• redirect resource to a different url

Info

Note that using the mock command requires support for WebDriver Bidi. That is usually the case when running tests locally in a Chromium based browser or on Firefox as well as if you use a Selenium Grid v4 or higher. If you run tests in the cloud, make sure that your cloud provider supports WebDriver Bidi.

Info

The URLPattern is an experimental technology and not yet supported in some environments, e.g. Node.js. We recommend to import a polyfill until the feature is more widely supported.

Usage

browser.mock(url, { method, requestHeaders, responseHeaders, postData, statusCode })

Parameters

Name	Type	Details
url	String	URL zum Mocken
filterOptions optional	MockFilterOptions	Mock-Ressource nach zusätzlichen Optionen filtern
filterOptions.method optional	String, Function	Ressource nach HTTP-Methode filtern
filterOptions.requestHeaders optional	Object, Function	Ressource nach bestimmten Anfrage-Headern filtern
filterOptions.responseHeaders optional	Object, Function	Ressource nach bestimmten Antwort-Headern filtern
filterOptions.postData optional	String, Function	Ressource nach Anfrage-postData filtern
filterOptions.statusCode optional	Number, Function	Ressource nach Antwort-Statuscode filtern

Example

mock.js

it('should mock network resources', async () => {
    // via static string
    const userListMock = await browser.mock('**' + '/users/list')
    // or as regular expression
    const userListMock = await browser.mock(/https:\/\/(domainA|domainB)\.com\/.+/)
    // 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 = await browser.mock('**', {
        // mock all json responses
        statusCode: 200,
        requestHeaders: { 'Content-Type': 'application/json' },
        responseHeaders: { 'Cache-Control': 'no-cache' },
        postData: 'foobar'
    })

    // comparator function
    const apiV1Mock = await browser.mock('**' + '/api/v1', {
        statusCode: (statusCode) => statusCode >= 200 && statusCode <= 203,
        requestHeaders: (headers) => headers['Authorization'] && headers['Authorization'].startsWith('Bearer '),
        responseHeaders: (headers) => headers['Impersonation'],
        postData: (data) => typeof data === 'string' && data.includes('foo')
    })
})

it('should modify API responses', async () => {
    // filter by method
    const todoMock = await browser.mock('**' + '/todos', {
        method: 'get'
    })

    // mock an endpoint with a fixed fixture
    todoMock.respond([{
        title: 'Injected Todo',
        order: null,
        completed: false,
        url: "http://todo-backend-express-knex.herokuapp.com/916"
    }])

    // respond with different status code or header
    todoMock.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', async () => {
    const scriptMock = await browser.mock('**' + '/script.min.js')
    scriptMock.respond('./tests/fixtures/script.js')
})

it('should redirect web resources', async () => {
    const headerMock = await browser.mock('**' + '/header.png')
    headerMock.respond('https://media.giphy.com/media/F9hQLAVhWnL56/giphy.gif')

    const pageMock = await browser.mock('https://google.com/')
    pageMock.respond('https://webdriver.io')
    await browser.url('https://google.com')
    console.log(await browser.getTitle()) // returns "WebdriverIO · Next-gen browser and mobile automation test framework for Node.js"
})

Returns

• <Mock> return: ein Mock-Objekt zur Modifizierung der Antwort