CSS-селекторы в Puppeteer

Puppeteer — это инструмент для автоматизации браузера, который предоставляет мощный API для взаимодействия с веб-страницами. Одним из ключевых аспектов тестирования веб-приложений с использованием Puppeteer является работа с элементами на странице. Чтобы выбрать нужные элементы и взаимодействовать с ними, Puppeteer использует CSS-селекторы, аналогично тому, как это делается в обычном CSS.

CSS-селекторы являются основой для поиска элементов на странице в Puppeteer. Они позволяют указать точные критерии для нахождения элементов, используя стандартные возможности CSS. В этой главе рассмотрены основные принципы работы с CSS-селекторами в Puppeteer, а также примеры их использования.

Основные принципы использования селекторов в Puppeteer

Puppeteer предоставляет методы для работы с элементами на странице через API, использующему CSS-селекторы. Например, чтобы получить первый элемент, который соответствует селектору, используется метод page.() < /code>,адляполучениявсехэлементов— < code > page.$()</code>.</p> <h4 id="пример">Пример:</h4> <pre class="javascript"><code>const element = await page.$(&

В этом примере page.(′button.submit′) < /code > ищетпервыйэлементнастранице, которыйявляетсякнопкойсклассом < code > submit < /code > . < /p >  < p > Еслинеобходимополучитьвсеэлементы, подходящиеподопределённыйселектор, используетсяметод < code > page.$()</code>:</p> <pre class="javascript"><code>const elements = await page.$$(&#39;div.class-name&#39;);</code></pre> <p>Этот метод возвращает массив всех элементов, которые соответствуют селектору <code>div.class-name</code>.</p> <h3 id="структура-css-селекторов">Структура CSS-селекторов</h3> <p>CSS-селекторы в Puppeteer могут быть различными в зависимости от того, какие критерии поиска требуются. Рассмотрим наиболее распространённые типы селекторов:</p> <h4 id="селекторы-по-тегам">Селекторы по тегам</h4> <p>Самый простой и распространённый способ поиска элементов — это использование имени тега. Например, если нужно найти все элементы <code>&lt;div&gt;</code>, можно использовать селектор <code>div</code>.</p> <pre class="javascript"><code>const divs = await page.$$(&#39;div&#39;);</code></pre> <h4 id="селекторы-по-классам">Селекторы по классам</h4> <p>Классы используются для более специфичного поиска элементов. Например, чтобы найти все элементы с классом <code>.my-class</code>, применяется селектор <code>.my-class</code>.</p> <pre class="javascript"><code>const elements = await page.$$(&#39;.my-class&#39;);</code></pre> <p>Для поиска элементов с несколькими классами используется комбинированный селектор. Например, чтобы найти элемент с классами <code>my-class</code> и <code>active</code>, используется следующий синтаксис:</p> <pre class="javascript"><code>const element = await page.$('.my-class.active');

Селекторы по идентификаторам

Идентификаторы (ID) элементов также могут быть использованы в качестве селекторов. Они уникальны на странице, поэтому такие селекторы обычно используются для поиска одного элемента. 

const element = await page.$('#unique-id');

Атрибутные селекторы

CSS позволяет искать элементы, основываясь на значениях их атрибутов. Например, чтобы найти все ссылки с атрибутом href, указывающим на определённый адрес, можно использовать атрибутный селектор: 

const links = await page.$$('a[href="https://example.com"]');

Атрибутные селекторы могут быть полезны при работе с элементами, у которых значения атрибутов изменяются динамически. 

const button = await page.$('button[type="submit"]');

Псевдоклассы

CSS псевдоклассы — это ключевые элементы, позволяющие выбирать элементы в определённом состоянии, например, при наведении курсора или при клике. Например, псевдокласс :hover позволяет выбрать элементы, на которые в данный момент наведён курсор: 

const button = await page.$('button:hover');

Для поиска первого элемента с указанным псевдоклассом используется метод page.() < /code>,адлявсехтакихэлементов— < code > page.$()</code>.</p> <h4 id="селекторы-потомков">Селекторы потомков</h4> <p>CSS позволяет выбирать элементы, которые являются потомками других элементов. В Puppeteer можно комбинировать различные селекторы, чтобы указать иерархию элементов на странице. Например, для поиска всех элементов <code>&lt;a&gt;</code>, которые являются потомками элемента с классом <code>.container</code>, используется следующий селектор:</p> <pre class="javascript"><code>const links = await page.$$(&#39;.container a&#39;);</code></pre> <p>Такой подход помогает более точно указать на элементы, которые находятся внутри других элементов с конкретной структурой.</p> <h4 id="селекторы-с-псевдоэлементами">Селекторы с псевдоэлементами</h4> <p>Псевдоэлементы в CSS, такие как <code>::before</code> и <code>::after</code>, не могут быть напрямую выбраны с помощью стандартных CSS-селекторов в Puppeteer. Однако, можно использовать методы для работы с содержимым таких элементов через JavaScript.</p> <p>Пример получения содержимого с псевдоэлементом:</p> <pre class="javascript"><code>const content = await page.$eval('.element::before', el => getComputedStyle(el).content);

Комбинированные селекторы

В CSS можно комбинировать различные селекторы для более точного поиска. Например, если нужно найти элементы с классом .item, которые являются детьми элемента с классом .container, можно использовать следующий комбинированный селектор: 

const elements = await page.$$('.container .item');

Такой подход позволяет работать с элементами в сложных структурах, что особенно полезно при тестировании динамических и многоуровневых интерфейсов.

Использование XPath с Puppeteer

Несмотря на то что CSS-селекторы являются основным методом поиска элементов в Puppeteer, также возможно использовать XPath для сложных запросов. В Puppeteer есть методы для работы с XPath, такие как page.$x()</code>, которые позволяют выполнять более сложные выборки.</p> <p>Пример использования XPath:</p> <pre class="javascript"><code>const elements = await page.$x('//div[@class=&quot;my-class&quot;]');

Использование XPath может быть полезно в тех случаях, когда необходимо выполнить выборку по более сложным критериям, которые не поддерживаются стандартными CSS-селекторами.

Взаимодействие с элементами после выбора

После того как элемент был выбран с помощью CSS-селектора, можно взаимодействовать с ним, используя различные методы Puppeteer, такие как:

  • click(): Для имитации клика на элемент.
  • type(): Для ввода текста в элементы формы.
  • evaluate(): Для получения значений или выполнения действий с элементом.

Пример клика по элементу: 

const button = await page.$('button.submit');
await button.click();

Взаимодействие с элементами является важной частью автоматизированных тестов и позволяет проверять различные сценарии работы интерфейса.

Советы и рекомендации

  1. Уникальность селекторов: Для надёжности тестов следует использовать уникальные и стабильные селекторы. Использование ID или комбинированных классов помогает минимизировать вероятность ошибок при поиске элементов.

  2. Использование явных ожиданий: Puppeteer позволяет работать с элементами асинхронно. Рекомендуется использовать методы, такие как waitForSelector(), чтобы дождаться появления элемента на странице перед взаимодействием с ним.

  3. Оптимизация производительности: Использование CSS-селекторов помогает избежать лишней загрузки и ускоряет поиск элементов, так как это нативный механизм браузера.

  4. Тестирование различных браузеров: Puppeteer работает с Chromium, но также поддерживает другие браузеры. Проверка элементов с использованием CSS-селекторов может быть полезна при тестировании кросс-браузерной совместимости.

Использование CSS-селекторов в Puppeteer позволяет точно выбирать элементы на странице, обеспечивая высокую гибкость и точность в автоматизации браузера для тестирования.

Оглавление