Functional Testing of Web Applications with Playwright: Basics

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://habr.com/'); // Сбор заголовков статей const titles = await page.$$eval('h2 a', links => links.map(link => link.textContent)); console.log('Заголовки статей:'); titles.forEach((title, index) => { console.log(`${index + 1}: ${title}`); }); await browser.close(); })();

We use the method $$eval() to extract the text of article titles. This allows you to collect all the headers into an array and print them to the console.

Testing interaction with elements

In the last example, we will test complex interaction with elements on the page. Let's say we have a feedback form and we want to test that the user can successfully submit their data:

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

(async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto('https://example.com/contact');

    // Заполнение формы
    await page.fill('input[name="name"]', 'John Doe');
    await page.fill('input[name="email"]', 'john.doe@example.com');
    await page.fill('textarea[name="message"]', 'Hello, this is a test message!');
    await page.click('button[type="submit"]');

    // Ожидание успешного сообщения
    await page.waitForSelector('text=Спасибо за ваше сообщение!', { timeout: 5000 });
    console.log('Сообщение отправлено успешно!');

    await browser.close();
})();

Here we fill out the feedback form, click on the submit button and wait for a message about successful submission to appear.