В этой статье блога мы рассмотрим различные методы проведения фокус-теста с использованием Playwright, библиотеки автоматизации с открытым исходным кодом для веб-браузеров. Мы предоставим примеры кода для каждого метода, что позволит вам понять и эффективно реализовать фокус-тесты. Итак, приступим!

1. Использование метода page.evaluate:

   const focusedElement = await page.evaluate(() => document.activeElement);

   Этот метод использует функцию page.evaluatePlaywright для выполнения кода JavaScript в контексте браузера. Он извлекает элемент, находящийся в фокусе в данный момент, обращаясь к свойству document.activeElement.

2. Использование метода page.$eval:

   const focusedElement = await page.$eval(':focus', (element) => element);

   Метод page.$evalпозволяет оценить функцию в контексте первого соответствующего элемента. В этом случае мы используем :focusв качестве селектора, чтобы выбрать элемент в фокусе и вернуть его.

3. Использование метода page.$с селекторами Playwright:

   const focusedElement = await page.$(':focus');

   Метод page.$извлекает первый элемент, соответствующий предоставленному селектору. Здесь мы используем :focusв качестве селектора для непосредственного получения элемента в фокусе.

4. Использование API page.keyboard:

   await page.keyboard.press('Tab');
   const focusedElement = await page.$(':focus');

   Этот метод имитирует нажатие клавиши Tab для навигации по фокусируемым элементам. После нажатия клавиши Tab мы извлекаем элемент в фокусе с помощью метода page.$.

5. Использование метода page.waitForFunction:

   await page.waitForFunction(() => document.activeElement !== null);
   const focusedElement = await page.evaluate(() => document.activeElement);

   Используя page.waitForFunction, мы можем дождаться, пока элемент станет фокусом. Приведенный выше код ожидает, пока document.activeElementне станет нулевым, а затем извлекает его с помощью page.evaluate.

В этой статье мы рассмотрели несколько методов проведения фокус-тестов с помощью Playwright. Эти методы позволяют вам получить элемент, сфокусированный в данный момент, и включить его в свои сценарии автоматизации. Внедряя фокус-тесты, вы можете обеспечить правильную обработку взаимодействия с пользователем и повысить общее удобство работы пользователей с вашими веб-приложениями.