Playwright, Selenium, etc.. Вопрос про специфику работы данных инструментов.

Question

Playwright, Selenium, etc.. Вопрос про специфику работы данных инструментов.

Lolita Nabokovskaya Мастер (1180), на голосовании 7 месяцев назад

Делаю тест:

Зайти на страничку
Нажать на кнопку сортировки и выбрать "По новизне"
Сделать паузу (3-5 сек)
Забрать комментарии в массив

Проблема в том, что когда захожу на страницу, кнопка сортировки выставлена "По умолчанию".
Когда выбираю "По новизне", делаю паузу и забираю комментарии, то, забираются комментарии, как будто кнопка выставлена "По умолчанию" и в массив заходят именно в этой последовательности, а нужно, чтобы по новизне были отсортированы. Проблема как я понимаю в DOM-дереве и Playwright, Selenium видят "старую" версию DOM'а, потому что данные подгрузились динамически.
Как правильно обрабатывать такие моменты? Как заставить Playwright и Selenium видеть измененную структуру HTML?

Answer 1

Ваша проблема связана с асинхронной загрузкой данных на странице, когда после выполнения действия (например, изменения сортировки комментариев) данные обновляются динамически, без перезагрузки страницы. В таких случаях действительно может возникнуть ситуация, когда Playwright или Selenium "видят" DOM в его предыдущем состоянии, потому что операции с DOM выполняются синхронно, а данные на странице обновляются асинхронно.

Вот несколько подходов, как можно решить эту проблему:

### 1. Явное ожидание элемента

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

- В Playwright:

 await page.waitForSelector('селектор_элемента_после_обновления');

- В Selenium (Python):

 from selenium.webdriver.common.by import By 
from selenium.webdriver.support.ui import WebDriverWait 
from selenium.webdriver.support import expected_conditions as EC 
 
wait = WebDriverWait(driver, 10) 
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "селектор_элемента_после_обновления")))

### 2. Явное ожидание определенного состояния

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

- В Playwright:

 await page.waitForFunction('документ или элемент в DOM изменился как ожидается');

- В Selenium (Python):

 wait.until(lambda driver: driver.find_element(By.CSS_SELECTOR, "селектор").get_attribute("атрибут") == "ожидаемое_значение")

### 3. Использование пауз с проверками

Хотя использование жестко заданных пауз (`sleep`) не рекомендуется из-за их ненадежности и влияния на производительность тестов, иногда это может быть временным решением. Однако лучше использовать паузы с последующими проверками состояния DOM, чтобы убедиться, что данные действительно обновились.

### 4. Повторные попытки сбора данных

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

### Заключение

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