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.

Improve this question

5 Answers 5

Reset to default
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.

Improve this answer
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.
Improve this answer
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 with stable IDs; things like login & profile controls on headers & footers. If you have influence on the markup that a taxonomical naming convention as per namespaces in OO code can be very powerful when combined with an expected data model in your test code.
  • Name: Good for locally unique/page scope controls, items were the context makes the reference unique.
  • xPath: Necessary were you have little or no influence on the markup and flexibility is paramount. Can be useful were duplicate ID appear in different areas of a page.
  • class name: Generally necessary for JS Frameworks. I personally hate this approach because it makes using the tell don't ask idiom very difficult.
  • partial/link text: Useful for multilingual testing such as menus, click through and data driven content. A good application would be the test requirement in functional testing of not being interested in markup, just is specific data present.
Improve this answer
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 :-)

Improve this answer
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")]
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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