Одной из важнейших задач при автоматизированном тестировании является извлечение данных с веб-страниц. Playwright предоставляет мощный набор инструментов для работы с элементами на страницах, включая возможность получения данных. В данном разделе рассматриваются различные методы получения данных с веб-страниц с использованием Playwright в JavaScript.
textContentМетод textContent позволяет извлечь текстовое содержимое
элемента. Это полезно, когда необходимо получить текст, который
находится в пределах какого-либо HTML-элемента, такого как параграф,
заголовок или кнопка.
Пример:
const element = await page.$('.element-selector');
const text = await element.textContent();
console.log(text);Этот код извлекает текстовое содержимое элемента с классом
.element-selector. Метод textContent
возвращает строку, содержащую весь текст, включая текст внутри дочерних
элементов. Важно помнить, что он также включает невидимые элементы,
такие как текст в скрытых элементах.
getAttributeДля извлечения значений атрибутов, таких как href,
src, alt и других, используется метод
getAttribute. Это особенно важно для тестирования ссылок,
изображений и других элементов, зависящих от атрибутов.
Пример:
const link = await page.$('a');
const href = await link.getAttribute('href');
console.log(href);В данном примере извлекается значение атрибута href из
первого найденного элемента ссылки на странице.
inputValueДля получения значений из форм (например, текстовых полей,
радио-кнопок, чекбоксов) Playwright предоставляет метод
inputValue, который позволяет легко извлекать введенные
данные.
Пример:
const input = await page.$('input[name="username"]');
const value = await input.inputValue();
console.log(value);Этот код извлекает значение из текстового поля с именем
username. Метод inputValue работает не только
с полями ввода, но и с текстовыми областями (textarea).
Извлечение данных из таблиц — важная задача, часто встречающаяся при тестировании веб-приложений. Playwright предоставляет удобные методы для работы с таблицами и извлечения содержимого ячеек.
Пример:
const cell = await page.$('table tr:nth-child(2) td:nth-child(3)');
const text = await cell.textContent();
console.log(text);В этом примере извлекается текст из третьей ячейки второй строки
таблицы. Методы nth-child позволяют гибко выбирать
элементы, что удобно при работе с динамическими таблицами.
Современные веб-приложения часто обновляют содержимое страницы без перезагрузки, что делает традиционные методы получения данных менее эффективными. Playwright справляется с этим благодаря функции ожидания элементов и динамическому извлечению данных.
Метод waitForSelector позволяет дождаться появления
нужного элемента на странице перед его извлечением:
await page.waitForSelector('.dynamic-element');
const element = await page.$('.dynamic-element');
const text = await element.textContent();
console.log(text);Этот код ждет, пока элемент с классом .dynamic-element
не станет доступен на странице, после чего извлекает его текстовое
содержимое.
evaluateИногда необходимо получить данные, которые находятся не в
HTML-элементах, а в JavaScript-объектах на странице, например, в
глобальных переменных или данных, хранимых в window. В
таких случаях можно использовать метод evaluate, который
позволяет выполнять JavaScript-код в контексте страницы.
Пример:
const pageTitle = await page.evaluate(() => document.title);
console.log(pageTitle);Этот код извлекает заголовок страницы, выполняя JavaScript-код внутри
контекста страницы. Метод evaluate позволяет работать с
любыми данными, доступными на странице, включая глобальные
переменные.
locatorВ Playwright существует концепция локаторов, которые позволяют эффективно работать с элементами, которые могут изменяться или быть созданы динамически. Локаторы предоставляют удобный интерфейс для работы с элементами на странице, включая их получение и манипуляцию с ними.
Пример использования локатора для извлечения текста:
const locator = page.locator('.dynamic-element');
const text = await locator.textContent();
console.log(text);Использование локаторов позволяет повысить устойчивость тестов, так как Playwright автоматически следит за состоянием элементов и обновляет информацию о них.
Playwright позволяет комбинировать методы получения данных с использованием регулярных выражений для более сложных сценариев. Это полезно, когда нужно извлечь данные, которые соответствуют определенному шаблону.
Пример:
const text = await page.textContent('.price');
const price = text.match(/\d+\.\d+/)[0];
console.log(price);Здесь используется регулярное выражение для извлечения числа с
десятичной точкой из текста элемента с классом .price.
Playwright предлагает широкий набор инструментов для получения данных с веб-страниц. Независимо от того, нужно ли извлечь текст, атрибуты, значения из форм или динамически обновляемые данные, Playwright предоставляет удобные методы и возможности для решения этой задачи. Использование локаторов, регулярных выражений и методов для ожидания элементов позволяет создать надежные и гибкие тесты, которые могут работать с любыми веб-приложениями.