CODEWITHSUNDEEP
cssselenium-webdrivercss-selectors
Damien-Amen
Damien-Amen

Reputation: 7492

Css Selector of page for selenium

I have the following content 

<div class="startpack">
<div class="test-class">
    <div id="login">
        <div id="frag">
            <h3>blah blah blah</h3>
        </div>
        <div id="testfrag">
            <form class="loginform">
                <input class="button" type="submit" value="log in" />
            </form>
        </div>
    </div>
</div>  

<div class="real-class">
    <div id="login">
        <div id="frag">
            <h3>blah blah blah</h3>
        </div>
        <div id="testfrag">
            <form class="loginform">
                <input class="button" type="submit" value="log in" />
            </form>
        </div>
    </div>
</div>  

<div class="noshow-class">
    <div id="login">
        <div id="frag">
            <h3>blah blah blah</h3>
        </div>
        <div id="testfrag">
            <form class="loginform">
                <input class="button" type="submit" value="log in" />
            </form>
        </div>
    </div>
</div>  
</div>

Now if I want my selenium code to click on the submit button inside the <div class="real-class"> what do I use for cssSelector?

I tried 

driver.findElementBycssSelector(".startpack>#real-class>input[class=\"button\"]").click()

But that didn't work. I want to make it generalized as much as possible without doing div[0] or div[1] etc.. So that if my DOM structure changes in the future I really don't have to worry about modifying the locator.

Upvotes: 0

Views: 148

Answers (1)

Nico O
Nico O

Reputation: 14102

you have used the id selector # on real-class but actually you only have an element with the class name .real-class.

You can change your HTML to match this selector or just use the class selector instead .startpack>.real-class input[class="button"]

You also have used the direct child combinator > in a bad way. (http://www.w3.org/TR/css3-selectors/#child-combinators)

#real-class>input.button would only be true, when your html would look like this:

<div id="real-class">
  <input class="button" value="test" type="submit" />
</div>

In your example the button is not a direct child of real-class

Upvotes: 1

Related Questions