Как найти псевдоэлемент :: перед использованием Selenium Python - PullRequest
Новая
       53

Как найти псевдоэлемент :: перед использованием Selenium Python

0 голосов
/ 11 января 2020

Я использую Selenium Python, чтобы найти элемент метки. Я хочу использовать :: before , чтобы найти его, потому что это всплывающее окно. 

 <div class="crow" grp="0" grpname="Pizza Size">
    ::before
    <label class="label0" cid="1">
    <input type="radio" name="0" coname="M" sname="" price="9.99" value="392">M<b class="ip">9.99</b>
    </label>
    <label class="label0" cid="1"><input type="radio" name="0" coname="L" sname="" price="11.99" value="393">L<b class="ip">11.99</b>
    </label><div style="clear:both">
    </div>
    </div>

I понятия не имеете, как использовать :: прежде чем найти его, любой друг может помочь?

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Псевдоэлементы

A CSS псевдоэлемент используется для стилизации указанных частей элемента. Он может использоваться для:

  • Стили первой буквы или строки элемента
  • Вставка содержимого до или после содержимого элемента

:: after

::after - это псевдоэлемент, который позволяет вставлять содержимое на страницу с CSS (без необходимости быть в HTML). Хотя конечного результата на самом деле нет в DOM, он появляется на странице так, как если бы он был, и по существу будет выглядеть следующим образом:

CSS: 

div::after {
  content: "hi";
}

:: before

::before точно такой же, только он вставляет содержимое перед любым другим содержимым в HTML вместо after. Единственными причинами использования одного над другим являются:

  • Вы хотите, чтобы сгенерированный контент располагался перед содержимым элемента, позиционно.
  • Содержимое ::after также "после" в порядке следования исходного кода, поэтому он будет располагаться поверх ::before, если естественным образом накладываются друг на друга.

Демонстрация извлечения свойств из

В соответствии с приведенным выше обсуждением вы не можете найти элемент ::before в DOM Tree , но вы всегда сможете получить содержимое псевдоэлементов , т.е. ::before и ::after элементов. Вот пример:

Для демонстрации мы извлечем содержимое элемента ::after (снимок экрана ниже) на этом веб-сайте :

after_element

  • Кодовый блок: 

    from selenium import webdriver

options = webdriver.ChromeOptions() 
options.add_argument("start-maximized")
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option('useAutomationExtension', False)
driver = webdriver.Chrome(options=options, executable_path=r'C:\WebDrivers\chromedriver.exe')
driver.get('https://meyerweb.com/eric/css/tests/pseudos-inspector-test.html')
script = "return window.getComputedStyle(document.querySelector('body>p.el'),':after').getPropertyValue('content')"
print(driver.execute_script(script).strip())

  • Консольный выход: 

    " (fin.)"

Этот вывод консоли точно соответствует значению свойства content элемента ::after, как показано в HTML DOM :

after_content

Этот сценарий использования

Для извлечения значения Свойство content элемента ::before позволяет использовать следующее решение: 

script = "return window.getComputedStyle(document.querySelector('div.crow'),':before').getPropertyValue('content')"
print(driver.execute_script(script).strip())

Outro

Несколько соответствующих документов:

0 голосов
/ 11 января 2020

Если я не ошибаюсь, selenium не предоставляет никакой функции или вызова API для этого.
Вы можете попробовать выполнить синтаксический анализ html и затем найти тег с помощью простого regular expression.
Надеюсь, это поможет :)

...