Прокрутка страницы и элементов

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

Прокрутка страницы

Одним из наиболее распространенных случаев является необходимость прокрутить всю страницу, чтобы взаимодействовать с элементами, находящимися ниже видимой области. В Playwright для этого используются методы page.scrollIntoView() и page.evaluate().

Использование scrollIntoView()

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

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const targetElement = await page.$('#target-element');  // Ищем элемент по селектору
  await targetElement.scrollIntoViewIfNeeded();  // Прокручиваем страницу до элемента
  
  // После прокрутки можно взаимодействовать с элементом
  await targetElement.click();
  
  await browser.close();
})();

Метод scrollIntoViewIfNeeded() прокручивает страницу только в случае, если элемент не виден в текущем окне. Это более оптимизированный вариант по сравнению с простым scrollIntoView(), который всегда инициирует прокрутку.

Прокрутка страницы с использованием evaluate()

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

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Прокручиваем страницу на 1000px вниз
  await page.evaluate(() => {
    window.scrollBy(0, 1000);
  });
  
  await browser.close();
})();

В этом примере страница прокручивается на 1000 пикселей вниз. Для прокрутки вверх можно использовать отрицательные значения.

Прокрутка элементов

В некоторых случаях необходимо прокручивать не всю страницу, а только отдельный элемент, например, длинный список или контейнер с прокручиваемым содержимым. В этом случае можно использовать метод elementHandle.scrollIntoViewIfNeeded().

Прокрутка элемента внутри контейнера

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

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Находим прокручиваемый контейнер
  const container = await page.$('.scrollable-container');

  // Находим целевой элемент внутри контейнера
  const targetElement = await container.$('.target-element');

  // Прокручиваем контейнер до целевого элемента
  await targetElement.scrollIntoViewIfNeeded();
  
  await browser.close();
})();

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

Прокрутка с таймером или плавно

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

Пример плавной прокрутки страницы:

const { chromium } = require('playwright');

async function smoothScroll(page, targetPosition) {
  await page.evaluate((targetPosition) => {
    return new Promise((resolve) => {
      let scrollInterval = setInterval(() => {
        let currentPosition = window.scrollY;
        let step = (targetPosition - currentPosition) / 10;
        window.scrollBy(0, step);
        
        if (Math.abs(window.scrollY - targetPosition) < 1) {
          clearInterval(scrollInterval);
          resolve();
        }
      }, 10);
    });
  }, targetPosition);
}

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Прокрутка страницы плавно до конца
  await smoothScroll(page, 5000);  // Прокрутка до 5000 пикселей

  await browser.close();
})();

Этот подход позволяет сделать прокрутку более естественной, создавая ощущение плавного движения.

Прокрутка до элемента, видимого на экране

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

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // Ждём появления элемента
  await page.waitForSelector('#target-element', { visible: true });
  
  // Прокручиваем страницу до элемента
  const targetElement = await page.$('#target-element');
  await targetElement.scrollIntoViewIfNeeded();
  
  await browser.close();
})();

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

Заключение

Прокрутка страницы и элементов в Playwright — это мощный инструмент, который позволяет тестировщикам автоматизировать взаимодействие с длинными страницами или прокручиваемыми элементами. Использование методов прокрутки помогает гарантировать, что все элементы, с которыми требуется взаимодействовать, будут видны в области видимости.

Оглавление