Playwright click: установить библиотеку и нажать кнопку

click() — действие Playwright, а не отдельный пакет. Оно находит элемент страницы и выполняет клик в браузере. Ниже используется библиотека playwright для Node.js: самостоятельный скрипт запускает Chromium, создаёт контекст и страницу, нажимает кнопку и проверяет результат.

Какие задачи решает клик

• Проверка кнопок и ссылок через обычное взаимодействие со страницей.
• Повторение сценария в Chromium, Firefox или WebKit. WebKit в Playwright не означает запуск установленного Safari; Google Chrome также выбирают отдельно от комплектного Chromium.
• Ожидание готовности элемента: перед обычным locator.click проверяются единственность цели, видимость, стабильность, возможность получать события и отсутствие disabled-состояния.

Для флажка обычно лучше check()/uncheck() или setChecked(), чтобы задать нужное состояние, а не слепо переключать его. Автоматизация не гарантирует правильность приложения: после действия проверяют наблюдаемый результат.

Пример использования

Шаг 1. Установить библиотеку

В отдельном Node.js-проекте с package.json выполните:

npm install playwright

Для полноценного набора тестов с фикстурами и повторяющимися проверками рассмотрите @playwright/test. Это другой способ запуска; самостоятельный скрипт ниже не запускается командой playwright test.

Шаг 2. Установить браузер

npx playwright install chromium

Версии браузерных бинарников связаны с версией Playwright. После обновления пакета может потребоваться повторная установка. Наличие npm-пакета само по себе не доказывает наличие подходящего браузера и системных зависимостей.

Шаг 3. Найти кнопку и выполнить клик

Сохраните код в click-demo.cjs. Расширение cjs явно выбирает CommonJS для require. В примере страница создаётся через setContent, поэтому кнопка действительно существует и внешнего сайта для демонстрации не нужно.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.setContent(`
      <button id="submit" type="button">Сохранить</button>
      <p id="result" role="status"></p>
      <script>
        document.querySelector('#submit').addEventListener('click', () => {
          document.querySelector('#result').textContent = 'Сохранено';
        });
      </script>
    `);

    await page.locator('button#submit').click();
    await page.getByRole('status').filter({
      hasText: 'Сохранено'
    }).waitFor();
    console.log(await page.getByRole('status').textContent());
    await context.close();
  } finally {
    await browser.close();
  }
})().catch(error => {
  console.error(error);
  process.exitCode = 1;
});

node click-demo.cjs

Ожидаемый вывод — «Сохранено». В скрипте сохранены отдельные browser, context и page. В реальном приложении замените setContent на await page.goto('URL_ВАШЕГО_ТЕСТОВОГО_ПРИЛОЖЕНИЯ'), а селектор и проверку — на соответствующие его интерфейсу. Открытие example.com само по себе не создаёт там кнопку submit.

Если клик не сработал

1. Проверьте, что locator выбирает ровно нужный элемент. Для доступной кнопки можно использовать getByRole('button', { name: 'Сохранить', exact: true }).
2. Проверьте, не перекрыта ли цель диалогом, не отключена ли она и не продолжается ли анимация. Не обходите причину через force без понимания результата.
3. Если кнопка внутри iframe, начните поиск в нужном frameLocator.
4. Ожидайте конкретного состояния после действия. Фиксированная пауза не доказывает завершение запроса, а успешный click не доказывает сохранение данных на сервере.