CODEWITHSUNDEEP
htmlcsscss-selectorsautomated-tests
nightmag
nightmag

Reputation: 31

How to write a css selector in automation testwith ::before to find a element

How to create a css selctor for a checkbox with :: before selector. I want to create css selector of a radio button . I am using the selector for eg: [data-model-cid="c279"]>label in firepath and it shows me the element.However in the test script its unable to get the element.In google console when I try to get the element by $('[data-model-cid="c279"]>label') it is unable to fetch the element.So I think the :: before selector needs to be added in the selector to search the element. The Html is given below.How to write a selector with the :: before ?

    <div class="radio" data-model-cid="c279">
      :: before
    <input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
    <label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
      :: before
      4 years 
    <strong>(+ $39)</strong>
    </label>
    </div>

Upvotes: 2

Views: 967

Answers (1)

SidOfc
SidOfc

Reputation: 4584

From what I know you cannot do this, mainly because an input is an empty tag (self-closing) and it basically has no content.

within a <div> element if you look at the following example

<style>
    .my-div::before {
        content: 'before';
    }

    .my-div::after {
        content: 'after';
    }
</style>
<div class="my-div"></div>

You'll notice in the chrome devtools you'll get something like this

<div class="my-class">
    ::before
    ::after
</div>

This is possible because the ::before and ::after psuedo-elements live inside the div tag, if you add another child div with a height and a background you'll see the words before pop up above the child div and after pop up after the child div - this is because they are basically children but inserted in a different way (through CSS).

The following is what you're looking for the browser to do

<input type="radio"></input>

to

<input type="radio">
    ::before
    ::after
</input>

But this is wrong already since the input tag shouldn't have any content in it. Most browsers will probably ignore this or even try to fix your markup for you but you simply won't be able to get this working.

From the documentation on MDN

"The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."

A correct <input> tag looks like this:

<input type="radio" />

And since this doesn't have any room to place the ::before and ::after in it won't work. You'll have to find an alternative solution unfortunately.

Upvotes: 1

Related Questions