click

Overview

Use the click command to click on an element.

warning

If you have elements with fixed positions (e.g., a fixed header or footer) that cover the selected element after scrolling to it, the click will be executed at the given coordinates but will be intercepted by your fixed (overlaying) element. In such cases, the following error is issued:

Element is not clickable at point (x, x). Other element would receive the click: ...

To bypass this, try finding the overlaying element and remove it using the execute command, so it does not interfere with the click. You can also try to scroll the element manually using scroll offset to match your scenario.

Usage

await browser.$(selector).click({ button, x, y, skipRelease });

Command Parameters

Name	Type	Description
button	String or Number	The button to use for the click. Can be 0, 1, 2 or "left", "middle", "right" respectively.
x	Number	The x-coordinate to click.
y	Number	The y-coordinate to click.
skipRelease	Boolean	If true, no releaseActions will be sent after the click.

Usage Examples

Example 1

example-1.html

<button id="myButton" onclick="document.getElementById('someText').innerHTML='I was clicked'">Click me</button>
<div id="someText">I was not clicked</div>

click-1.js

it("should demonstrate the click command", async ({ browser }) => {
    const myButton = await browser.$("#myButton");
    await myButton.click();

    const myText = await browser.$("#someText");
    const text = await myText.getText();

    assert.equal(text, "I was clicked"); // true
});

example-1.js

it("should fetch menu links and visit each page", async ({ browser }) => {
    const links = await browser.$$("#menu a");

    for (let link of links) {
        await link.click();
    }
});

Example 2

example-2.html

<button id="myButton">Click me</button>

example-2.js

it("should demonstrate a click using an offset", async ({ browser }) => {
    const myButton = await browser.$("#myButton");

    // Click 30 horizontal pixels
    // from the button's position (from the center of the element)
    await myButton.click({ x: 30 });
});

Example 3

example-3.html

<button id="myButton">Click me</button>

example-3.js

it("should demonstrate a right click passed as string", async ({ browser }) => {
    const myButton = await browser.$("#myButton");

    // Open context menu at the button's location
    await myButton.click({ button: "right" });
});

it("should demonstrate a right click passed as number while adding an offset", async ({
    browser,
}) => {
    const myButton = await browser.$("#myButton");

    // Open context menu 30 horizontal and 40 vertical pixels
    // from the button's position (from the center of the element)
    await myButton.click({ button: 2, x: 30, y: 40 });
});

it("should skip sending releaseAction command that causes unexpected alert closure", async ({
    browser,
}) => {
    const myButton = await browser.$("#myButton");

    // Skip sending releaseActions
    await myButton.click({ button: 2, x: 30, y: 40, skipRelease: true });
});

References

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