How to Click a Button in Playwright Using click() Method

By AravindPlaywright Tutorial
Syntax to click on button using click() method in playwright

Learn how to click a button in with practical example using click() method in Playwright.

Clicking a button is one of the most common actions if you’re automating browser tasks using Playwright. You can use Playwright’s built-in click() method to click on a button.

In this post, I’ll walk you through how to simulate mouse click action using the click() method in Playwright, with real code examples and a few pro tips to make your scripts more reliable and efficient.

What is the click() Method in Playwright?

Using the click() method in Playwright, you can simulate a mouse click(Left click) action on a DOM element, such as a button, link, or any clickable item.

Syntax of click() Method

Here is a syntax of the click() method to use in Playwright.

await page.click('#clickBtn');

The above syntax will locate the button(id=clickBtn) element in the DOM and click on it.

How to Click a Button in Playwright – Basic Example

Let’s say you have the following HTML:

<button id="clickBtn">Click Me</button>

Here’s how you can click it using Playwright:

Practical Example of Clicking a Button In Playwright

const { test, expect } = require('@playwright/test');

test('Click on button in Playwright test', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-practice-page.html');
  await page.click('#clickBtn');
  await expect(page.locator('#clickOutput')).toContainText('Button was clicked!');  
});
Playwright code example showing how to click a button using the click() method with a browser simulation

Code Breakdown

  • await page.click(‘#clickBtn’): It will locate the button by id = “clickBtn” and click on it.
  • await expect(page.locator(‘#clickOutput’)).toContainText(‘Button was clicked!’): It will verify the text “Button was clicked!” displayed on the page after clicking the buttons.

Selecting Buttons with Different Selectors

Playwright supports CSS selectors, text selectors, XPath, and more. Here are a few ways you can target a button:

Locate the button by Text

await page.click('text="Click Me"');

Locate the button by XPath

await page.click('//button[@id="clickBtn"]');

Locate the button by Class

await page.click('.btn-submit');

Use the method that best fits your page structure. I personally prefer text selectors for buttons when the label is unique.

Best Practices for Clicking Buttons in Playwright

Here are a few quick tips to avoid flaky tests:

1. Wait for the button to be visible

Sometimes buttons load dynamically. Use waitForSelector() to ensure it’s ready to click.

await page.waitForSelector('#clickBtn', { state: 'visible' });
await page.click('#clickBtn');

2. Use assertions if needed

Validate that the expected action happened after the click:

await expect(page).toHaveURL(/dashboard/);

3. Handle disabled buttons

You can use the code given below to make sure that the button is not disabled before clicking on it.

const isDisabled = await page.$eval('#clickBtn', el => el.disabled);
if (!isDisabled) {
  await page.click('#clickBtn');
}

Clicking Buttons Inside Frames or Shadow DOM

If the button is inside a frame or iframe, you’ll need to handle it like this:

const frame = page.frame({ name: 'myFrame' });
await frame.click('#clickBtn');

For Shadow DOM, you can use evaluateHandle or newer Playwright features, depending on the version you are using.

Wrapping Up

You can use the click() method in Playwright to click on a button. Whether you’re doing end-to-end testing, web scraping, or automation, this method is your one-stop solution for simulating button click action.

Leave a Reply

Your email address will not be published. Required fields are marked *