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!');
});

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.
Related Articles
- How to Use Playwright Recorder to Automatically Generate Test
- How to Get the Page Title in Playwright
- How to Verify/Assert Title Using toHaveTitle() in Playwright
Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.