How to Use the Playwright Click() Method in Test Automation

What Is the Playwright Click() Method?

The click() method in Playwright simulates a user clicking on a web element. It’s commonly used to interact with buttons, links, checkboxes, radio buttons, and other clickable elements during automation testing.

Beyond basic clicks, it also supports actions like double-clicks, right-clicks, modifier key clicks, and position-based clicks, helping you accurately replicate real user interactions and ensure end-to-end test reliability.

How to Perform Click Actions Using Playwright Click()?

The Playwright click() method enables testers to mimic user clicks on web elements, making it possible to validate functionality and interactions in web applications.

By using this method, you can automate navigation, trigger actions, and ensure that elements behave as expected during Playwright automation.

Before performing Playwright click() operations, you need a Playwright configuration file. This file is used to define the settings and parameters for running your automated tests. It lets you specify browsers/projects, base URL, test options (headless, screenshots, video), timeouts, retries, reporters, and other capabilities.

You can also include cloud execution capabilities in the same file, centralizing all test setup for consistent execution across local and cloud environments.

Code Implementation:

import {devices,PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
    projects: [
        {
            name: "chrome:latest:macOS Sonoma@lambdatest",
            use: {
                viewport: { width: 1920, height: 1080 },
            },
        },
        {
            name: "chrome:latest:Windows 10@lambdatest",
            use: {
                viewport: { width: 1280, height: 720 },
            },
        },
        {
            name: "Google Chrome",
            use: {
                ...devices["Desktop Chrome"],
                channel: "chrome"
            }
         },
        {
            name: "firefox",
            use: {
                ...devices["Desktop Firefox"]
            }
        }
    ],
    testDir: "./tests/specs/",


    use: {
        baseURL: "https://ecommerce-playground.lambdatest.io/",
        headless: false,
        screenshot: "on",
        video: "on",
        launchOptions: {
             slowMo: 100
        },
    },
    timeout: 60 * 1000 * 1,
    retries: 0,
    reporter: [["dot"], ["json", {
        outputFile: "jsonReports/jsonReport.json"
    }], ["html", {
        open: "never"
    }]]
};
export default config;

Code Implementation:

• Import Modules: Imports devices and PlaywrightTestConfig from @playwright/test to define configuration and access device presets.
• Projects: Defines multiple browser and OS combinations for running tests on the LambdaTest cloud and local environments.
• Test Directory: Specifies ./tests/specs/ as the folder containing all test spec files.
• Global Use Settings: Sets baseURL, headless mode, screenshots, video recording, and slowMo for debugging.
• Timeouts and Retries: Configures a global timeout of 60 seconds and 0 retries for tests.
• Reporters: Configures test result reporting formats, including dot, json, and HTML.
• Export Config: Exports the config object so Playwright can use it during test execution.

Now that your config file is set up, let’s learn how to perform a basic Playwright click() action using the following test scenario:

Test Scenario:

• Navigate to Website: Navigate to the LambdaTest Selenium Playground website.
• Access Ajax Form: Locate and click on the “Ajax Form Submit” link.
• Verify Page Load: Verify that the “Ajax Form Submit” page loads successfully by checking its heading.

Code Implementation:

Create a new test spec file named click.spec.ts, and add the following code to implement the test scenario and demonstrate the click action.

import { test, expect } from '@playwright/test'
test('Test Mouse Click', async ({ page }) => {
 await page.goto('https://www.lambdatest.com/selenium-playground/')
 await page.getByRole('link', {name: "Ajax Form Submit"}).click()
 await expect(page.getByRole('heading', {name: "Form Submit Demo"})).toHaveText("Form Submit Demo")
})

Code Walkthrough:

• Import Modules: Imports test and expect from Playwright for defining and validating tests.
• Test Definition: Creates a test case named ‘Test Mouse Click’ to simulate user interaction.
• Navigate to URL: Opens the LambdaTest Selenium Playground website using the goto() method.
• Perform Click Action: Uses getByRole() to locate the ‘Ajax Form Submit’ link and performs a click().
• Validate Result: Asserts that the ‘Form Submit Demo’ heading is visible after the click action.

Test Execution:

You can run the Playwright tests in two ways:

• Directly from the terminal: Run the following command given below.

npx playwright test specs/basic-click.spec.ts --project="Google Chrome”

• Using a script in package.json: Add the following to your package.json under scripts.

"scripts": {
  "test:click": "npx playwright test specs/basic-click.spec.ts --project='Google Chrome'"
}

This allows you to run the test easily using the shortcut:

npm run test:click

It avoids typing the full command every time.

The following screenshot of the test report (npx playwright show-report) shows that the test was executed successfully, and the click action was performed:

Running Playwright click() tests locally can sometimes be challenging due to flaky tests, dynamic UI changes, slow page loads, or elements taking time to appear. These issues may cause test failures even when the application behaves correctly.

However, using a cloud testing platform helps overcome these challenges. One such platform is LambdaTest helps resolve these challenges by providing stable, scalable environments with multiple browser and OS combinations.

How to Run Playwright Click() Tests in Parallel?

Lambdatest supports automated retries, parallel execution, and better handling of dynamic elements, ensuring consistent results across environments. It allows you to perform Playwright testing across 3,000+ browser and OS combinations, making it easier to test at scale and ensure consistent application behavior.

To run Playwright tests, you need to follow the steps below:

• Get Credentials: To run your Playwright test on LambdaTest, first get your Username and Access Key by navigating to your profile avatar > Account Settings > and copying them from the Password & Security tab.
• Get Capabilities: Use the Automation Capabilities Generator to create capabilities that specify your preferred browser and its supported operating systems based on your needs.
• Create a Fixture File for Cloud Execution: A fixture file defines the capabilities and configuration for running Playwright testing in the cloud. Create a folder named base in your project and add the following fixture file:

import * as base from "@playwright/test";
import path from "path";
import { chromium } from "playwright";

// LambdaTest capabilities
const capabilities = {
  browserName: "Chrome", // Browsers allowed: Chrome,MicrosoftEdg, pw-chromium, pw-firefox and pw-webkit
  browserVersion: "latest",
  "LT:Options": {
    platform: "Windows 10",
    build: "Playwright TS Build",
    name: "Playwright Test",
    user: process.env.LT_USERNAME,
    accessKey: process.env.LT_ACCESS_KEY,
    network: true,
    video: true,
    console: true,
    tunnel: false, // Add tunnel configuration if testing locally hosted webpage
    tunnelName: "", // Optional
    geoLocation: '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
  },
};

// Patching the capabilities dynamically according to the project name.
const modifyCapabilities = (configName, testName) => {
  let config = configName.split("@lambdatest")[0];
  let [browserName, browserVersion, platform] = config.split(":");
  capabilities.browserName = browserName
    ? browserName
    : capabilities.browserName;
  capabilities.browserVersion = browserVersion
    ? browserVersion
    : capabilities.browserVersion;
  capabilities["LT:Options"]["platform"] = platform
    ? platform
    : capabilities["LT:Options"]["platform"];
  capabilities["LT:Options"]["name"] = testName;
};

const test = base.test.extend({
  page: async ({ page }, use, testInfo) => {
    // Configure LambdaTest platform for cross-browser testing
    let fileName = testInfo.file.split(path.sep).pop();
    if (testInfo.project.name.match(/lambdatest/)) {
      modifyCapabilities(
        testInfo.project.name,
        `${testInfo.title} - `${fileName}`      );

    const browser = await chromium.connect(`wss://cdp.lambdatest.com/playwright?capabilities=`${encodeURIComponent(
          JSON.stringify(capabilities))}`,)

      const ltPage = await browser.newPage(testInfo.project.use);
      await use(ltPage);

      const testStatus = {
        action: "setTestStatus",
        arguments: {
          status: testInfo.status,
          remark: testInfo.error?.stack || testInfo.error?.message,
        },
      };
      await ltPage.evaluate(() => {},
      `lambdatest_action: `${JSON.stringify(testStatus)}`);
      await ltPage.close();
      await browser.close();
    } else {
      // Run tests in local in case of local config provided
      await use(page);
    }
  },
});

export default test;

• Configure Playwright: Create or update your playwright.config.ts file to include both local and cloud projects:

import {devices,PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
    
    projects: [
        { 
            name: "chrome:latest:macOS Sonoma@lambdatest",
            use: {
                viewport: { width: 1920, height: 1080 },
            },
        },
        {
            name: "chrome:latest:Windows 10@lambdatest",
            use: {
                viewport: { width: 1280, height: 720 },
            },
        },
        {
            name: "Google Chrome",
            use: {
                ...devices["Desktop Chrome"],
                channel: "chrome"
            }
         },
        {
            name: "firefox",
            use: {
                ...devices["Desktop Firefox"]
            }
        }
    ],
    testDir: "./tests/specs/",

    use: {
        baseURL: "https://ecommerce-playground.lambdatest.io/",
        headless: false,
        screenshot: "on",
        video: "on",
        launchOptions: {
             slowMo: 100
        },
    },
    timeout: 60 * 1000 * 1,
    retries: 0,
    reporter: [["dot"], ["json", {
        outputFile: "jsonReports/jsonReport.json"
    }], ["html", {
        open: "never"
    }]]
};

export default config;

There are 4 projects updated in the config file as given below:

• chrome:latest:macOS Sonoma@lambdatest: It will run the test on the latest version of Chrome browser on macOS Sonoma on the LambdaTest cloud platform.
• chrome:latest:Windows 10@lambdatest: It will run the test on the latest version of Chrome browser on Windows 10 on the LambdaTest cloud platform.
• Google Chrome: It will run the test on the Google Chrome browser.
• Firefox: It will run the test on the Firefox browser.
• Update Test Scripts: One minor change is required in the test script to run it on the LambdaTest cloud platform. The test object should be imported from the custom fixture file that you created, and not from “playwright”. If the test object is not imported from the custom fixture, the test will run locally rather than on the cloud.

import test from '../../base/fixture'
import { expect } from '@playwright/test'

Test Execution:

The project names can be updated in the test execution command while running the test, as shown below:

npx playwright test specs/basic-click.spec.ts --project="chrome:latest:macOS Sonoma@lambdatest"

The screenshot below from LambdaTest shows that the basic click test ran successfully on the cloud platform.

To get started with LambdaTest execution, follow the support documentation on Playwright testing with LambdaTest.

Advanced Operations Using Playwright Click() Method

Playwright browser testing supports advanced interactions such as double-clicking, right-clicking, hovering over elements, performing forced clicks, and using keyboard modifiers like ALT or CTRL with clicks.

Let’s dive in and see how to perform these Playwright click() operations effectively.

Performing a Right-Click() Operation

Right-clicking is an essential action in web automation testing, often used to validate context menus and custom interactions.

The following test scenario will demonstrate the working of the right-click() action:

Test Scenario :

• Navigate and Right-Click Action: Navigate to the Context Menu page on the LambdaTest Selenium Playground website.
• Perform Right-Click Action: Right-click on the box provided on the Context Menu Page.

Code Implementation:

import { test } from '@playwright/test'
test('Test Right Click', async ({ page }) => {
 await page.goto('https://www.lambdatest.com/selenium-playground/context-menu')
 await page.locator('#hot-spot').click({button: "right"})
})

In Playwright automation testing, the click({ button: {"right"}) is used to perform a right-click (context menu click) on an element, rather than the usual left-click.

Performing a Double Click() Operation

Double-clicking is a key action in web automation testing that often needs to be performed to validate user interactions.

The following test scenario will demonstrate the working of the double-click() action:

Test Scenario :

• Navigate and Double-Click Action: Navigate to the Checkbox Demo page on the LambdaTest Selenium Playground website.
• Perform Double-Click Action: Double-click on the “Click on check box” checkbox.
• Verify Result: Verify that the checkbox remains unchecked.

Code Implementation:

import {test, expect} from '@playwright/test'
test('Test Double Click', async({page}) => {
await page.goto('[https://www.lambdatest.com/selenium-playground/checkbox-demo](https://www.lambdatest.com/selenium-playground/checkbox-demo)')
await page.getByLabel('Click on check box').dblclick()
await expect(page.getByLabel('Click on check box')).not.toBeChecked
})

In Playwright, the dblclick() method is used for simulating the double-click action.

Performing Mouse Hover and Force Click() Operation

Mouse hover action in web automation testing is used to validate tooltips, dropdowns, and other hover-based interactions.

The following test scenario will be used to demonstrate a mouse hover action and then perform a force click on the element:

Test Scenario :

• Navigate: Navigate to the LambdaTest E-commerce Playground website.
• Mouse Hover and Force Click: Mouse hover over the “My account” menu and Force click on the Login link.
• Verify Result: Verify that the Login page is displayed.

Code Implementation:

import {test, expect} from '@playwright/test'

test('Test mouse hover and force click', async({page}) => {
await page.goto("[https://ecommerce-playground.lambdatest.io/](https://ecommerce-playground.lambdatest.io/)")
await page.getByRole('button',{name:"My account"}).hover()
await page.getByRole('link', {name:"Login"}).click({force: true})
await expect(page.getByRole('heading', {name: "Returning Customer"})).toHaveText("Returning Customer")
})

In Playwright, the hover() method is used to perform a mouse hover action. To forcefully click on an element, the parameter {force: true} should be supplied in the click() method.

Performing Position-Based Clicking (with X.Y Coordinates) Operation

Position-based clicking is a useful technique in Playwright automation that allows interacting with elements at specific screen coordinates when traditional locators may not work as desired.

The following test scenario will demonstrate the working of the position-based click() action with coordinates:

Test Scenario :

• Navigate: Navigate to the Simple Form Demo page.
• Enter Values: Enter the numeric values in the Enter first value and Enter second value fields.
• Locate Coordinates: Find the location coordinates of the Get Sum button.
• Position-Based Click: Click on the Get Sum button using the coordinates.
• Verify Result: Verify that the result displayed for adding the two values is correctly displayed.

Code Implementation:

import {test, expect} from '@playwright/test'
test('Test Position based click', async({page})=> {
await page.goto("[https://www.lambdatest.com/selenium-playground/simple-form-demo](https://www.lambdatest.com/selenium-playground/simple-form-demo)")
await page.locator('#sum1').fill("1")
await page.locator('#sum2').fill("2")
await page.getByRole('button', {name: 'Get Sum'}).click({position: {x:10, y:5}})
await expect(page.locator('#addmessage')).toHaveText("3")
})

The click position can be specified using the { position: { x, y } } parameter within the click() method.

Performing Click() With Modifiers (Ctrl, Alt, Shift)

Sometimes in web automation testing, you’ll need to combine a mouse event with key events like CTRL, ALT, or Shift to trigger special actions.

Let’s walk through a test scenario that shows the working of modifiers in Playwright:

Test Scenario :

• Navigate: Navigate to the LambdaTest Selenium Playground website.
• Shift+Click Action: Perform a Shift+Click on the “Input Form Submit” menu.
• Verify: Verify that the menu is opened in a new window.

Code Implementation:

import { test, expect } from '@playwright/test'

test('Test Click with Modifier', async ({ page, context }) => {
await page.goto('[https://www.lambdatest.com/selenium-playground/](https://www.lambdatest.com/selenium-playground/)')
await page.getByRole('link', {name: "Input Form Submit"}).click({ modifiers: ['Shift']})
const pagePromise = context.waitForEvent('page');
const pageTwo = await pagePromise;
await expect(pageTwo.getByRole('heading', {name: 'Form Demo'})).toHaveText('Form Demo')
})

The parameters {modifiers: [<modifier name>]} should be supplied in the click() method to perform a click action with a modifier. Playwright supports the Shift, Control, Alt, Meta, ShiftLeft, and ControlOrMeta modifier keys for click actions. The ControlOrMeta option maps to the Control key on Windows and Linux, and to the Meta key on macOS, ensuring cross-platform consistency.

Performing Delay With Click() Operation

In Playwright, you can use the timeout option with the click() method to specify how long to wait for an element before the action fails. It helps in handling the flakiness in the tests.

Let’s walk through the following test scenario to understand how to use Playwright timeouts with the click() action:

Test Scenario :

• Navigate: Navigate to the LambdaTest Selenium Playground website.
• Delayed Click: Click on the Drag and Drop menu after a delay of 3 seconds.

Code Implementation:

import { test, expect } from '@playwright/test'

test('Test Mouse Click', async ({ page }) => {
await page.goto('[https://www.lambdatest.com/selenium-playground/](https://www.lambdatest.com/selenium-playground/)')
await page.getByRole('link', {name: "Drag and Drop"}).click({delay: 3000 })
await expect(page.getByRole('heading', {name: "Drag and Drop Demo"})).toHaveText("Drag and Drop Demo")
})

The {delay: &lt;timeout in ms&gt;} parameter should be supplied in the click() method to delay the click.

Performing Drag and Drop With Mouse Click() Operation

Drag-and-drop is a common user interaction, often used to rearrange items or move elements across sections of a page. Playwright provides built-in support for drag-and-drop actions, making it easier to automate such scenarios.

Let’s consider a test scenario to understand how to perform drag-and-drop with Playwright:

Test Scenario :

• Navigate: Navigate to the Drag and Drop page of the LambdaTest Selenium Playground website.
• Drag and Drop: Perform a drag and drop operation on the “Draggable 1” element.
• Verify: Verify that the drag-and-drop operation is successful.

Code Implementation:

import {test, expect} from '@playwright/test'
test('Test drag and drop action', async({page}) => {
await page.goto("https://www.lambdatest.com/selenium-playground/drag-and-drop-demo")
await page.getByText('Draggable 1').dragTo(page.locator('#mydropzone'))
await expect(page.locator('#droppedlist')).toHaveText('Draggable 1')

})

The dragTo() method in Playwright is used to perform drag-and-drop actions on a specific element.

Performing Drag Action Manually

Playwright also offers mouse action methods that can be combined to manually simulate a drag-and-drop interaction, just like a real user would.

Let’s consider a test scenario to understand how to perform a drag action manually using the Playwright click() action:

Test Scenario :

• Navigate: Navigate to the Drag and Drop page on the LambdaTest Selenium Playground website.
• Hover: Hover over the “Draggable 1” element.
• Click and Hold: Click and hold the element using mouse.down().
• Drag: Drag it to the drop zone by hovering over the target element.
• Release: Release the mouse using mouse.up().
• Verify: Verify that the element has been successfully dropped into the target.

Code Implementation:

import {test, expect} from '@playwright/test'
test('Test drag and drop action manually', async({page}) => {
await page.goto('https://www.lambdatest.com/selenium-playground/drag-and-drop-demo')
await page.getByText('Draggable 1').hover()
await page.mouse.down()
await page.locator('#mydropzone').hover()
await page.mouse.up()
await expect(page.locator('#droppedlist')).toHaveText('Draggable 1')
})

Playwright provides methods such as mouse.down(), mouse.up(), and hover() that can be combined to simulate a drag-and-drop action. Similarly, a click-and-hold interaction can be achieved by using mouse.down() and mouse.up(), along with the click() method configured with delay parameters.

Performing Programmatic Playwright Click() Operation

In Playwright, a click can also be triggered programmatically using the dispatchEvent() method. This fires the click event directly on the element instead of simulating a physical mouse interaction, which is useful for testing scenarios where traditional clicks may not work as expected.

Let’s walk through the following test scenario to demonstrate the programmatic click action:

Test Scenario :

• Navigate: Navigate to the LambdaTest Selenium Playground website.
• Programmatic Click: Perform a programmatic click on the Shadow DOM link.
• Verify: Verify that the Shadow DOM page loads successfully.

Code Implementation:

import {test,expect} from '@playwright/test'
test('Test Programmatic click', async({page})=> {
await page.goto('https://www.lambdatest.com/selenium-playground/')
await page.getByRole('link', {name: "Shadow DOM"}).dispatchEvent('click')
await expect(page.getByRole('heading', {name: "Shadow DOM"})).toHaveText("Shadow DOM")
})

The dispatchEvent('click') method in Playwright is used to fire a click event directly on the element.

Playwright is an open-source automation testing framework that helps you test across all modern browsers reliably and efficiently. Its Playwright futuristic features enable testing across a range of scenarios, from unit testing to full end-to-end automation.

Difference Between Playwright Click() vs Tap() Method

In Playwright, the click() method simulates traditional mouse interactions on desktop browsers, while the tap() method is designed to mimic touch gestures on mobile or tablet devices.

The following table explains the differences:

What Are Effective Debugging Techniques in Playwright Click() Actions?

Click actions may sometimes fail due to overlapping UI elements, timing issues, or dynamic elements. Debugging these test failures in Playwright helps identify the root cause and fix them effectively.

Here are some techniques to debug Playwright click() actions:

• Highlighting the Element Before a Click: Playwright allows visualizing the element targeted for a click. This helps verify that the correct element is being interacted with, which can reduce flakiness and is helpful when using auto-heal in Playwright features.

await page.getByRole('link', {name: "Ajax Form Submit"}).highlight()
await page.getByRole('link', {name: "Ajax Form Submit"}).click()

• Run Tests in Headed Mode: Normally, tests are executed in Playwright headless mode to speed up execution. Running them with the browser UI visible can help you observe interactions in real time and identify issues more easily.

npx playwright test --headed

• Add Delay to Test Execution: Use the slowMo parameter to slow down actions and better visualize the sequence of events. This can be set in the Playwright config file or via command line:

npx playwright test --slowMo 1000

• Pause Test Execution: Use page.pause() to stop the test and inspect the page manually. This is especially useful for complex interactions or when debugging dynamic elements.

await page.pause()

• Leverage Playwright Reporting: Generating Playwright reports after test execution helps track click failures, errors, and the sequence of actions. Combined with debugging techniques, this enables faster identification and resolution of issues.
• Use IDE Debugging: Setting breakpoints and running tests step-by-step in the IDE provides an in-depth view of test execution, making it easier to pinpoint why a click failed.

By combining these approaches, you can effectively debug click actions, leverage auto-heal Playwright for dynamic element handling, and generate reliable Playwright reporting to track and resolve failures.

Best Practices for Effectively Performing Playwright Click() Actions

Clicking is a primary action in web automation, and following best practices ensures your Playwright tests are reliable and realistic:

• Use Playwright Locators: The Playwright locators getByRole(), getByLabel(), or getByText() should be preferred over raw CSS Selectors or XPath. Using these locators correctly makes tests more readable, maintainable, and reduces flakiness.
• Avoid Hard Waits: Playwright offers built-in auto waits for elements to be visible, enabled, and stable before clicking. Avoid using arbitrary timeouts or delays, as they slow down test execution.
• Perform Assertions Before Clicking on the Element: Assertions ensure that an element is visible or enabled before performing a click. This reduces flakiness, especially when combined with Playwright tags to categorize tests for targeted execution.
• Avoid Position-Based Clicking; use Locators: Locators are more stable and efficient. Use correct Playwright selectors to target elements instead of relying on coordinates. Position-based clicks should only be used when elements cannot be uniquely identified.
• Use Modifiers When Required: Combine clicks with Ctrl, Shift, or Alt keys to test multi-select options or keyboard shortcuts effectively.
• Optimize Tests using Playwright Sharding: When running large test suites with multiple click interactions, Playwright sharding allows splitting tests across multiple workers or machines, ensuring faster and more reliable execution.

Conclusion

Click actions are one of the most common parts of web automation, and Playwright click() makes them both flexible and reliable. Whether it’s a simple button click or advanced interactions like right-click, hover, or double-click, you can easily simulate how real users interact with applications.

When paired with best practices like auto-waiting and smart debugging, these Playwright click() actions help you create stable and reliable tests. Mastering clicks is a great step toward building strong end-to-end automation with Playwright.