Проверка существования элементов

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

Основные методы для проверки существования элементов

Puppeteer предоставляет несколько инструментов для взаимодействия с DOM и проверки состояния элементов. Наиболее часто используемые методы — это page.() < /code>, < code > page.$()</code>, <code>page.waitForSelector()</code> и <code>page.evaluate()</code>.</p> <h4 id="метод-page.">1. Метод <code>page.$()

Метод page.$()</code> используется для поиска первого элемента на странице, который соответствует переданному CSS-селектору. Если элемент найден, возвращается объект элемента, если нет — возвращается <code>null</code>. Этот метод полезен для проверки, существует ли конкретный элемент.</p> <p>Пример использования:</p> <pre class="javascript"><code>const element = await page.$(& if (element) { console.log('Элемент существует!'); } else { console.log('Элемент не найден.'); }

  1. Метод page.() < /code >  < /h4 >  < p > Метод < code > page.() работает аналогично page.$()</code>, но вместо одного элемента возвращает массив всех элементов, которые соответствуют переданному CSS-селектору. Если элементов несколько, можно легко проверить их количество.</p> <p>Пример использования:</p> <pre class="javascript"><code>const elements = await page.$$('.menu-item'); if (elements.length > 0) { console.log('Элементы существуют!'); } else { console.log('Элементы не найдены.'); }

    1. Метод page.waitForSelector()

    Метод page.waitForSelector() является наиболее надёжным способом ожидания появления элемента на странице. Он не только проверяет существование элемента, но и может ожидать его появления в течение указанного времени, что удобно для динамических веб-страниц, где элементы могут загружаться асинхронно.

    Пример использования: 

    try {
 await page.waitForSelector('.modal', { timeout: 5000 });
 console.log('Элемент найден.');
} catch (error) {
 console.log('Элемент не найден или не появился за 5 секунд.');
}

    В этом примере метод ожидает появления элемента с классом .modal. Если элемент не появляется в течение 5 секунд, будет выброшено исключение.

    1. Метод page.evaluate()

    Метод page.evaluate() позволяет выполнять произвольный JavaScript код в контексте страницы, что может быть полезно для сложных проверок. Используя этот метод, можно проверить не только наличие элемента, но и его состояние, например, видимость или текстовое содержимое.

    Пример использования: 

    const isElementVisible = await page.evaluate(() => { const
element = document.querySelector('.popup'); return element &&
window.getComputedStyle(element).display !== 'none'; });
if (isElementVisible) { console.log('Элемент видим.'); } else { console.log('Элемент скрыт или отсутствует.'); }

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

Сложные проверки с использованием комбинаций методов

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

Пример комбинированной проверки: 

const element = await page.$('.form');
if (element) {
    const isVisible = await page.evaluate(el => {
        return el && window.getComputedStyle(el).visibility === 'visible';
    }, element);

    if (isVisible) {
        console.log('Элемент существует и видим.');
    } else {
        console.log('Элемент существует, но скрыт.');
    }
} else {
    console.log('Элемент не найден.');
}

Здесь сначала проверяется наличие элемента, а затем выполняется проверка его видимости.

Ожидание динамически загружаемых элементов

Для динамически загружаемых элементов, которые могут быть добавлены на страницу через JavaScript, метод waitForSelector() становится особенно полезным. Он позволяет дождаться появления элемента на странице, прежде чем продолжить выполнение теста.

Пример использования с асинхронным контентом: 

await page.goto('https://example.com');
await page.waitForSelector('.dynamic-content', { visible: true });
console.log('Динамическое содержимое появилось на странице.');

Здесь Puppeteer будет ждать, пока элемент с классом .dynamic-content не станет видимым, прежде чем продолжить выполнение.

Проверка видимости элементов

Для тестирования не только существования, но и видимости элементов на странице, можно использовать дополнительные параметры в методах Puppeteer. Например, waitForSelector() имеет опцию visible, которая ждёт, пока элемент не станет видимым.

Пример: 

await page.waitForSelector('.popup', { visible: true });
console.log('Popup стал видимым.');

Кроме того, можно использовать метод page.$eval()</code>, чтобы проверить видимость элемента внутри страницы:</p> <pre class="javascript"><code>const isVisible = await page.$eval('.button', el => { return window.getComputedStyle(el).display !== 'none' && window.getComputedStyle(el).visibility !== 'hidden'; });

if (isVisible) { console.log('Кнопка видна и доступна для взаимодействия.'); } else { console.log('Кнопка скрыта или недоступна.'); }

Практическое использование для тестирования

В процессе написания тестов для веб-приложений часто возникает необходимость в автоматической проверке наличия или отсутствия элементов. Например, для проверки корректной загрузки страницы или рендеринга компонентов интерфейса можно использовать такие методы, как waitForSelector() и evaluate(). Также они позволяют убедиться в том, что важные элементы не только существуют, но и находятся в нужном состоянии (например, видимость, активность).

Рассмотрим более комплексный пример: 

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

// Проверяем наличие и видимость кнопки для продолжения
const button = await page.$('.continue-btn');
if (button) {
    const isButtonVisible = await page.evaluate(el => {
        return window.getComputedStyle(el).display !== 'none' && window.getComputedStyle(el).visibility !== 'hidden';
    }, button);

    if (isButtonVisible) {
        console.log('Кнопка для продолжения видна.');
        await button.click(); // Нажимаем на кнопку
    } else {
        console.log('Кнопка скрыта.');
    }
} else {
    console.log('Кнопка не найдена.');
}

В этом примере сначала проверяется наличие кнопки с классом .continue-btn, затем — её видимость, и, если всё в порядке, выполняется клик по кнопке.

Итоги

Проверка существования элементов в Puppeteer — это ключевая задача для большинства тестов, связанных с интерфейсами. Используя методы page.() < /code>, < code > page.$(), page.waitForSelector() и page.evaluate(), можно эффективно решать задачи по поиску и взаимодействию с элементами. Эти методы позволяют не только проверять наличие, но и анализировать видимость элементов, что особенно важно для динамических страниц и сложных интерфейсов.

Оглавление