Skip to main content

respond

Overview​

Use the respond command to always reply with the same overwrite.

info

Also read the recipe "How to Track and Intercept Network Requests and Responses".

Usage​

mock.respond(overwrites, { header, statusCode, fetchResponse });

Command Parameters​

NameTypeDescription
overwritesMockOverwritePayload to overwrite the response.
headerObjectOverwrite specific headers.
statusCodeNumberOverwrite the response status code.
fetchResponseBooleanFetch the actual response before replying with fake data.

Usage Examples​

it("should demonstrate response overwrite with static data", async ({ browser }) => {
    const mock = await browser.mock("https://todo-backend-express-knex.herokuapp.com/", {
        method: "get",
    });

    mock.respond(
        [
            {
                title: "Injected (non) completed Todo",
                order: null,
                completed: false,
            },
            {
                title: "Injected completed Todo",
                order: null,
                completed: true,
            },
        ],
        {
            statusCode: 200,
            fetchResponse: true, // default
        },
    );

    await browser.url(
        "https://todobackend.com/client/index.html?https://todo-backend-express-knex.herokuapp.com/",
    );

    await browser.$("#todo-list li").waitForExist();

    const todoElements = await browser.$$("#todo-list li");
    console.log(await Promise.all(todoElements.map(el => el.getText())));
    // will output: "[ 'Injected (non) completed Todo', 'Injected completed Todo' ]"
});

it("should demonstrate response overwrite with dynamic data", async ({ browser }) => {
    const mock = await browser.mock("https://todo-backend-express-knex.herokuapp.com/");

    mock.respond(
        request => {
            if (request.body.username === "test") {
                return { ...request.body, foo: "bar" };
            }
            return request.body;
        },
        {
            statusCode: () => 200,
            headers: () => ({ foo: "bar" }),
            fetchResponse: false, // do not fetch the actual response
        },
    );
});

References​

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.