Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need to find element in selenium by css

I want to find the element of this link "us states" in <h5>. I am trying this in craigslist. Any help will be highly appreciated

Here is the url: http://auburn.craigslist.org/

 <html class=""> <head> <body class="homepage w1024 list">     <script type="text/javascript">     <article id="pagecontainer">             <section class="body">         <table id="container" cellspacing="0" cellpadding="0"      <tbody>            <tr>     <td id="leftbar">     <td id="center">     <td id="rightbar">         <ul class="menu collapsible">             <li class="expand s">             <li class="s">             <li class="s">                 <h5 class="ban hot">us states</h5>                 <ul class="acitem" style="display: none;">             </li>         <li class="s">         <li class="s"> 
like image 822
ktmrocks Avatar asked Aug 17 '13 11:08

ktmrocks


People also ask

How do I find an element using CSS?

Type “css=input[type='submit']” (locator value) in Selenium IDE. Click on the Find Button. The “Sign in” button will be highlighted, verifying the locator value. Attribute: Used to create the CSS Selector.

What is CSS locator in Selenium?

What are CSS Selectors in Selenium? CSS Selectors are one of the locator strategies offered by Selenium to identify the web elements. The CSS Selectors mainly use the character sequence pattern, which identifies the web elements based on their HTML structure.


1 Answers

Only using class names is not sufficient in your case.

  • By.cssSelector(".ban") has 15 matching nodes
  • By.cssSelector(".hot") has 11 matching nodes
  • By.cssSelector(".ban.hot") has 5 matching nodes

Therefore you need more restrictions to narrow it down. Option 1 and 2 below are available for css selector, 1 might be the one that suits your needs best.

Option 1: Using list items' index (CssSelector or XPath)

Limitations

  • Not stable enough if site's structure changes

Example:

driver.FindElement(By.CssSelector("#rightbar > .menu > li:nth-of-type(3) > h5")); driver.FindElement(By.XPath("//*[@id='rightbar']/ul/li[3]/h5")); 

Option 2: Using Selenium's FindElements, then index them. (CssSelector or XPath)

Limitations

  • Not stable enough if site's structure changes
  • Not the native selector's way

Example:

// note that By.CssSelector(".ban.hot") and //*[contains(@class, 'ban hot')] are different, but doesn't matter in your case IList<IWebElement> hotBanners = driver.FindElements(By.CssSelector(".ban.hot")); IWebElement banUsStates = hotBanners[3]; 

Option 3: Using text (XPath only)

Limitations

  • Not for multilanguage sites
  • Only for XPath, not for Selenium's CssSelector

Example:

driver.FindElement(By.XPath("//h5[contains(@class, 'ban hot') and text() = 'us states']")); 

Option 4: Index the grouped selector (XPath only)

Limitations

  • Not stable enough if site's structure changes
  • Only for XPath, not CssSelector

Example:

driver.FindElement(By.XPath("(//h5[contains(@class, 'ban hot')])[3]")); 

Option 5: Find the hidden list items link by href, then traverse back to h5 (XPath only)

Limitations

  • Only for XPath, not CssSelector
  • Low performance
  • Tricky XPath

Example:

driver.FindElement(By.XPath(".//li[.//ul/li/a[contains(@href, 'geo.craigslist.org/iso/us/al')]]/h5")); 
like image 178
Yi Zeng Avatar answered Sep 30 '22 11:09

Yi Zeng