Playwright Click: Every Option, Pattern and Error Fix

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

test('click a button by role', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');

  await page.getByRole('button', { name: 'Add Element' }).click();

  await expect(page.getByRole('button', { name: 'Delete' })).toBeVisible();
});

test('click three times with clickCount', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');

  await page.getByRole('button', { name: 'Add Element' }).click({ clickCount: 3 });

  await expect(page.getByRole('button', { name: 'Delete' })).toHaveCount(3);
});

test('click a link and land on the next page', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  await page.getByRole('link', { name: 'Get started' }).click();

  await expect(page).toHaveURL(/\/docs\/intro/);
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

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

test('click waits for the button to come back', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/dynamic_controls');

  await page.getByRole('button', { name: 'Remove' }).click();

  // For ~3 seconds there is no "Add" button. click() waits for it.
  await page.getByRole('button', { name: 'Add' }).click();

  await expect(page.locator('#message')).toHaveText("It's back!");
  await expect(page.getByRole('checkbox')).toBeVisible();
});

test('click waits for a disabled input to be enabled', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/dynamic_controls');

  await page.getByRole('button', { name: 'Enable' }).click();
  await page.getByRole('textbox').click();        // waits until enabled
  await page.getByRole('textbox').fill('Typed after the wait');

  await expect(page.getByRole('textbox')).toHaveValue('Typed after the wait');
});

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

test('right-click opens the context menu handler', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/context_menu');

  page.once('dialog', async dialog => {
    expect(dialog.message()).toBe('You selected a context menu');
    await dialog.accept();
  });

  await page.locator('#hot-spot').click({ button: 'right' });
});

test('click at a position inside the element', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/context_menu');

  let message = '';
  page.once('dialog', dialog => {
    message = dialog.message();
    return dialog.accept();
  });

  // 20px right and 20px down from the top-left of the box
  await page.locator('#hot-spot').click({ button: 'right', position: { x: 20, y: 20 } });

  expect(message).toBe('You selected a context menu');
});

test('double-click to edit a todo', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
  const newTodo = page.getByPlaceholder('What needs to be done?');
  await newTodo.fill('Buy milk');
  await newTodo.press('Enter');

  await page.getByTestId('todo-title').dblclick();

  const editor = page.getByRole('textbox', { name: 'Edit' });
  await editor.fill('Buy oat milk');
  await editor.press('Enter');
  await expect(page.getByTestId('todo-title')).toHaveText('Buy oat milk');
});

test('Ctrl/Cmd + click opens the link in a new tab', async ({ page, context }) => {
  await page.goto('https://the-internet.herokuapp.com/');

  const newPagePromise = context.waitForEvent('page');
  await page.getByRole('link', { name: 'A/B Testing' }).click({ modifiers: ['ControlOrMeta'] });
  const newPage = await newPagePromise;

  await expect(newPage).toHaveURL(/abtest/);
  await expect(page).toHaveURL('https://the-internet.herokuapp.com/'); // original tab stays put
});

test('trial click: check it is clickable without clicking', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');

  await page.getByRole('button', { name: 'Add Element' }).click({ trial: true });

  await expect(page.getByRole('button', { name: 'Delete' })).toHaveCount(0);
});

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

test('hover to reveal a link, then click it', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/hovers');

  const firstUser = page.locator('.figure').first();
  await firstUser.hover();
  await firstUser.getByRole('link', { name: 'View profile' }).click();

  await expect(page).toHaveURL(/\/users\/1$/);
});

test('hover a todo to reveal its delete button', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
  const newTodo = page.getByPlaceholder('What needs to be done?');
  await newTodo.fill('Remove me');
  await newTodo.press('Enter');

  const item = page.getByTestId('todo-item');
  await item.hover();
  await item.getByRole('button', { name: 'Delete' }).click();

  await expect(item).toHaveCount(0);
});

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

test('click inside an iframe', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/iframe');

  const editor = page.frameLocator('#mce_0_ifr');
  await editor.locator('body').click();

  await expect(editor.locator('body')).toContainText('Your content goes here.');
});

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

test('click a link that opens a new tab', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/windows');

  const popupPromise = page.waitForEvent('popup');   // start waiting first
  await page.getByRole('link', { name: 'Click Here' }).click();
  const newTab = await popupPromise;

  await expect(newTab).toHaveURL(/\/windows\/new$/);
  await expect(newTab.getByRole('heading', { name: 'New Window' })).toBeVisible();
});

TimeoutError: locator.click: Timeout 3000ms exceeded.
Call log:
  - waiting for locator('.destroy')
    - locator resolved to <button class="destroy" aria-label="Delete"></button>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is not visible

TimeoutError: locator.click: Timeout 3000ms exceeded.
Call log:
  - waiting for getByRole('link', { name: 'click here' })
    - locator resolved to <a href="" id="restart-ad">click here</a>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - <div class="underlay"></div> from <div id="modal">…</div> subtree intercepts pointer events
    - retrying click action

Error: locator.click: Error: strict mode violation: getByRole('button', { name: 'Delete' }) resolved to 3 elements:
    1) <button class="added-manually" onclick="deleteElement()">Delete</button> aka getByRole('button', { name: 'Delete' }).first()
    2) <button class="added-manually" onclick="deleteElement()">Delete</button> aka getByRole('button', { name: 'Delete' }).nth(1)
    3) <button class="added-manually" onclick="deleteElement()">Delete</button> aka getByRole('button', { name: 'Delete' }).nth(2)

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

test('fix "intercepts pointer events": close the overlay first', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/entry_ad');

  const modal = page.locator('#modal');
  await expect(modal).toBeVisible();

  await modal.getByText('Close').click();
  await expect(modal).toBeHidden();

  // Now nothing covers the page
  await page.getByRole('heading', { name: 'Entry Ad' }).click();
});

test('fix strict mode violation: pick one element', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/add_remove_elements/');
  const add = page.getByRole('button', { name: 'Add Element' });
  await add.click();
  await add.click();

  const deleteButtons = page.getByRole('button', { name: 'Delete' });
  await deleteButtons.first().click();

  await expect(deleteButtons).toHaveCount(1);
});

test('force: true sends the click to whatever is on top', async ({ page }) => {
  await page.goto('https://the-internet.herokuapp.com/entry_ad');
  await expect(page.locator('#modal')).toBeVisible();

  let navigations = 0;
  page.on('framenavigated', () => navigations++);

  // The "click here" link reloads the page. With force, the overlay gets the click instead.
  await page.getByRole('link', { name: 'click here' }).click({ force: true });
  await page.waitForTimeout(1500); // demo only: give a reload time to happen

  expect(navigations).toBe(0);
});

test('dispatchEvent fires a click with no actionability checks', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
  const newTodo = page.getByPlaceholder('What needs to be done?');
  await newTodo.fill('Hidden delete button');
  await newTodo.press('Enter');

  // .destroy is display:none until hover. A real click() would wait for it.
  await page.locator('.destroy').dispatchEvent('click');

  await expect(page.getByTestId('todo-item')).toHaveCount(0);
});