Когда дело доходит до веб-автоматизации и тестирования пользовательского интерфейса с помощью TypeScript, Playwright — мощный и популярный инструмент. Одна из распространенных задач при тестировании пользовательского интерфейса — проверить, существует ли элемент на веб-странице, прежде чем выполнять с ним какие-либо действия. В этой статье мы рассмотрим различные методы проверки существования элемента с помощью TypeScript и Playwright. Мы рассмотрим примеры кода и объясним каждый метод простыми словами, чтобы вы могли легко понять и реализовать их в своих проектах.

Метод 1: использование функции waitForSelector
Функция waitForSelectorпозволяет дождаться появления элемента на странице, прежде чем выполнять какие-либо действия. Он возвращает обещание, которое выполняется, когда элемент найден, или отклоняется, если элемент не найден в течение указанного времени ожидания.

await page.waitForSelector('#elementId');

Метод 2. Использование функции $$с проверкой длины
Функция $$возвращает массив элементов, соответствующих заданному селектору. Вы можете проверить, больше ли длина массива нуля, чтобы определить, существует ли элемент.

const elements = await page.$$('#elementId');
if (elements.length > 0) {
    // Element exists
} else {
    // Element does not exist
}

Метод 3: использование функции isVisible
Функция isVisibleпроверяет, виден ли элемент на странице. Он возвращает логическое значение, указывающее, видим ли элемент или нет.

const isVisible = await page.isVisible('#elementId');
if (isVisible) {
    // Element is visible
} else {
    // Element is not visible
}

Метод 4. Использование функции getAttribute
Функция getAttributeпозволяет получить значение определенного атрибута элемента. Вы можете проверить, не является ли возвращаемое значение нулевым или неопределенным, чтобы определить, существует ли элемент.

const attributeValue = await page.getAttribute('#elementId', 'attributeName');
if (attributeValue !== null && attributeValue !== undefined) {
    // Element exists
} else {
    // Element does not exist
}

Метод 5. Использование функции $$evalс проверкой длины.
Функция $$evalоценивает функцию для всех элементов, соответствующих данному селектору. Вы можете проверить, возвращает ли оцениваемая функция непустой массив, чтобы определить, существует ли элемент.

const exists = await page.$$eval('#elementId', elements => elements.length > 0);
if (exists) {
    // Element exists
} else {
    // Element does not exist
}

В этой статье мы рассмотрели несколько методов проверки существования элемента с помощью TypeScript и Playwright. Используя такие функции, как waitForSelector, $$, isVisible, getAttributeи $$eval, вы можете легко определить, существует ли элемент на веб-странице. Не забудьте выбрать метод, который лучше всего подходит для вашего конкретного случая использования. Удачного тестирования с Playwright!