Как узнать, если изменение состояния видимости элемента произошло?

  • 4 ноября 2023 г. 18:18
Ответы на вопрос 2
Для этого можно использовать следующие методы:

1. Метод is_displayed(): 
   - Позволяет проверить, отображается ли элемент на странице.
   - Возвращает True, если элемент видим, и False, если элемент скрыт или отсутствует на странице.
   - Пример использования: element.is_displayed()

2. Метод get_attribute('style'): 
   - Позволяет получить значение атрибута "style" элемента.
   - Возвращает строку с CSS-свойствами элемента.
   - Пример использования: element.get_attribute('style')

3. Метод find_elements_*:
   - Позволяет найти все элементы, удовлетворяющие указанным условиям.
   - Возвращает список найденных элементов (может быть пустым).
   - Пример использования: elements = driver.find_elements_by_css_selector('your_selector')

4. Метод wait.until():
   - Позволяет ожидать определенного состояния элемента с заданным таймаутом.
   - Работает в паре с классом WebDriverWait.
   - Пример использования: 
     - from selenium.webdriver.support.ui import WebDriverWait
     - from selenium.webdriver.support import expected_conditions as EC
     - WebDriverWait(driver, 10).until(EC.visibility_of(element))

Выбор метода зависит от конкретной ситуации и использованной библиотеки.
Расширю код с помощью комментариев:

// Функция, которая возвращает true, если элемент видимый
function isVisible(element) {
  return window.getComputedStyle(element).display !== 'none';
}

// Создаем экземпляр MutationObserver
const observer = new MutationObserver((mutations, obs) => {
  const modal = document.querySelector('#modalWindow'); // Селектор модального окна
  const dropdown = document.querySelector('#dropdownMenu'); // Селектор выпадающего меню

  // Проверяем, видимы ли элементы
  if (isVisible(modal) && isVisible(dropdown)) {
    console.log('Element is visible'); // Выводим сообщение в консоль, если элементы видимы
    obs.disconnect(); // Отключаем Observer
  }
});

// Конфигурация Observer
const config = {
  attributes: true,
  attributeFilter: ['style']
}

// Запускаем Observer для модального окна и выпадающего меню
observer.observe(document.querySelector('#modalWindow'), config);
observer.observe(document.querySelector('#dropdownMenu'), config);
Похожие вопросы