Finding CSS Selector for selenium test

Question

Could anyone tell me how to correctly find the css selector for the following code. I need to know the css selector and not the xpath as web elements cannot use xpath.

<div id="drag" class="dojoDndSource dojoDndTarget dojoDndContainer" style="height:300px;width:250px;font-size:1.2em;border:2px solid #ccc; padding:1em;overflow:auto; " data-dojo-type="dojo.dnd.Source">
<div id="1" class="dojoDndItem" style="padding:.5em;">1</div>
<div id="2" class="dojoDndItem" style="padding:.5em;">2</div>
<div id="3" class="dojoDndItem dojoDndItemAnchor" style="padding:.5em;">3</div>
<div id="99" class="dojoDndItem" style="padding:.5em;">T4</div>
<div id="100" class="dojoDndItem" style="padding:.5em;">T5</div>

I wish to select the div with id="99". I've tried using the following:

driver.findElement(By.cssSelector(".T4"));
driver.findElement(By.cssSelector("//input[@id='gbqfq']"));

I'm trying to use a method that used webelements I'm told webelements must be in CSS. — TrevDroid
– TrevDroid, Commented Feb 12, 2015 at 17:17

Subh · Accepted Answer · 2015-02-12 17:43:45Z

The code you've used to locate the element concerned, are both wrong, as explained below:

1- driver.findElement(By.cssSelector(".T4"));
Since you have put "." before "T4", it will search for the element having class T4, which is not present. "T4", in fact is the innerHTML/text of the element you want to locate.

2-driver.findElement(By.cssSelector("//input[@id='gbqfq']"));
As @BoltClock commented, this is infact an xpath that you are trying to use with a cssSelector method.

You can use the below code to locate the element using xpath, instead:

driver.findElement(By.xpath("//div[.='T4']"));

This will locate the div element with exact innerHTML/text as 'T4'.

Furthermore, You can also use the 'id', provided it is unique and doesn't change dynamically as below:

1- driver.findElement(By.xpath("//div[@id='99']"));
This will locate the div element with id '99'.

2- driver.findElement(By.id("99"));
This will locate the element with id '99'.

3-driver.findElement(By.cssSelector("div[id='99']"));
This will also locate the div element with id '99'.

Saifur · Accepted Answer · 2015-02-12 17:10:55Z

0

You are using XPath selector with By.cssSelector() which is wrong and in css . means class and you are trying to pass the text instead. You cannot perform text based search with css selector at this momenet. XPath is the best option in such case.

nth-child() gives you the ability to find the child element with index if you want to use the cssSelector. See this

//css walk thorugh with index
.dojoDndItem:nth-child(1)

However, I would prefer xpath text based search in this case

//div[.='1']
//div[.='T4']

..etc

edited Feb 12, 2015 at 17:10

answered Feb 12, 2015 at 16:57

Saifur

16.3k7 gold badges51 silver badges74 bronze badges

Comments

minion · Accepted Answer · 2015-02-12 18:25:43Z

0

You can use driver.findElement(By.id("99")); directly or if you want to use css selector, use the one below. you should use # if you are trying to get by id and . if you getting it by class name. Id selectors are the fastest, so try using id selectors as far as possible.

driver.findElement(By.cssSelector("#99"));

answered Feb 12, 2015 at 18:25

minion

4,3632 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Finding CSS Selector for selenium test

3 Answers 3

Comments

Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Finding CSS Selector for selenium test

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related