pythonseleniumselenium-webdrivercss-selectorspseudo-element

How locate the pseudo-element ::before using Selenium Python


I'm using Selenium Python to locate label element.I want to use ::before to locate it,because this is a pop window.

 <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 have no idea how to use ::before to locate it,any friend can help?


Solution

  • Pseudo Elements

    A CSS pseudo-element is used to style specified parts of an element. It can be used to:


    ::after

    ::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

    CSS:

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

    ::before

    ::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:


    Demonstration of extracting properties of

    As per the discussion above you can't locate the ::before element within the DOM Tree but you can always be able to retrieve the contents of the pseudo-elements, i.e. ::before and ::after elements. Here's an example:

    To demonstrate, we will be extracting the content of ::after element (snapshot below) within this website:

    after_element

    This console output exactly matches the value of the content property of the ::after element as seen in the HTML DOM:

    after_content


    This usecase

    To extract the value of the content property of the ::before element you can use the following solution:

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

    Outro

    A couple of relevant documentations: