3

I've got a fair basic grasp about how Selenium works, and I'm comfortable at a beginning level using it in VS and C#. However, when it comes to finding things in pages which are not straight-forward and/or simple, I find it a bit more challenging.

Example:

<body class="1-scroll-individual mysite" localization-scope="main">    
  <section-style="overflow: hidden; height: 100%"  id="main-knockout-context" class="default-skin" data-bind...blahblahblahblahblah">
      <div id="layout-window" data-bind="withContext: { @inOverlay: false }">
         <chrome-top params="leftToggle: chrome.left.toggleSize, rightToggle: chrome.right.toggleSize" class="jsx-component-rendered">...</chrome-top>
         <div id="layout-content" data-bind="bindAfter: somethingElse">
            <div id="chrome-left" class="chrome chrome-left chrome-overflow-auto mq-chrome-left" data-bind="css: {...}">...</div>
            <div class="event-stream-popout" data-bind="with: eventStream">...</div>
            <div id="chrome-right" class="chrome-right chrome-overflow-auto mq-chrome-right" data-bind="css: {...}">...</div>
               <div id="content-layout" class="content-layout mq-content-layout smthng-flex" data-bind="css: {.....}">  
               <div class="activity-bar" data-bind="activityBar: true"></div>
                  <sub-page id="content" params="subPage: subPage" class="smthng-flex jsx-component-rendered">
                     <div data-bind="template: template" class="page-inner smthng-flex">
                        <div class="entity-page 1-height-full">
                           <div class="entity-content" data-bind="page: aspect.page">
                              <div class="animate-potential" style="position: relative;">
                                 <div class="page-inner">
                                    <sub-page clas="entity-content-main2 jsx-component-rendered" params="subPage: area.subPage">
                                       <div data-bind="template: template" class="page-inner smthng-flex">
                                          <div class="1-height-full lay-horizontal mysite-ituser>
                                             <div class="entity-content-payload">                       
                                                <article class="home-header">           
                                                   <h2 localize-me>THIS IS THE TITLE I WANT TO ASSERT THE EXISTENCE OF</h2>

What's the best, or at least a good and solid, way of finding the bottom h2 tag and getting the contents? In this example, this is the only h2 tag. But on other similar pages there might be several h2 tags, and I want to find one with a specific content.

All ideas and suggestions are greatly appreciated.

3

In order to find the specific h2 tag you are trying to locate you can find them in below ways:

  1. Through name as an element locator.
  2. Using relative xpath syntax is : //tagname[@attribute="value"]
  3. Using absolute xpath you can define the child tag starting from the parent tag if snippet is not as big as given above.
  4. You can even install firepath addon from chrome and detect the xpath using firebug tool. This process eliminates the 2 and 3 options but is not recommended.

Bottom Line is don't worry about locating the elements, you will be perfect with shortly. Kindly let me know if you need anything more.

1

There are multiple ways - You can choose one of the below.

  • Use Firebug, which will help you in finding xpath quickly.
  • Check the static value in parent nodes, and traverse through it.
  • If the xpath is static, use static xpath, from root element, navigate it.
  • If there is identical tag element, try searching through tagname.
1

Locators are best used with the PageObject pattern and the @FindBy annotation.

Selenium WebDriver provides a number of different locator strategies and which you choose depends largely on the context. Where you can change or influence the page markup, the following approach works well.

ID: Ideal For globally unique items, login/profile controls, headers & footers.
Name: Good for locally unique/page scope controls.
xPath: Where flexibility is paramount.
class name: Generally necessary for JS Frameworks.
partial/link text: Useful for menus, data driven content and multilingual testing.

0

Your best option is to communicate to developers/web designers that each web element which is to be interacted with has to have id or name, and use those. Xpath is slow, flaky and easy to break, avoid it like a plague. CSS is preferable over Xpath.

If you are stuck and developers refuse to make QA easier by providing reliable locators, vote with your feet: switch to company where they do :-)

0

While designing locator I use which is:

  • Simple
  • Unique

I may use the following css:

'div article h2'

Or following xpath:

//h2[contains(text(),"This is the text I want")]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.