XPATH help for web scraper - xpath

I need to create a button in Web Scraping Chrome Extension to grab data from a web page but I cant get the next page button to work
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",1)"> > </div>
When you click next button > the code changed to the following
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",2)"> > </div>
Div around the buttons
<div class="dxpaging"> </div>
But I have got it to go forward > and then backwords as it only selects the active button at the start.. XPATH works but as per image it only goes the the 1st active button as there is 4 buttons.
//*[contains(concat( " ", #class, " " ), concat( " ", "on", " " ))]

To get all the buttons use XPATH:
//*[#class='on'][#onclick]
To get all the buttons, if there may another class than on added to the element, use XPATH:
//*[contains(#class,'on')][#onclick]
To get Button 1:
//*[#class="on"][contains(#onclick, '1')]
To get Button 2:
//*[#class="on"][contains(#onclick, '2')]
Above XPaths work on code:
<div>
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",1)">Button 1</div>
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",2)">Button 2</div>
</div>

Related

Cypress - cy.click() does not click on the value in the select2 drop down

I have a dropdown which has select2 class. On clicking the arrow in drop down, I get below code activated in DOM which has the values Reason1 and Reason2 in the dropdown. I want to iterate on the available values and select the desired option.
Using each function, I am able to itearte on the array and get the available values, but I am unable to perform cy.click() on the same to get the value selected. I am not getting any error and code is running fine but the click in not happening (neither on div , li nor span tag)
`<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason1
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason2
</div>
</li>
</ul>`
Given below is my code
cy.get('#select2-drop > .select2-results').find('li').each(($el,index,$list) => {
let option = $el.find('div').text()
if(option=='Reason2')
{
$el.find('div').click()
}
})
If I add $el.find('div').css('background-color','yellow') in the if condition, elements background color is getting changed to yellow but click is not happening.
Can anyone please help on this.
Thanks!
you can use these command if you want to select the second one
cy.get('#select2-drop > .select2-results')
.type("{downarrow}")
.type("{downarrow}")
.type("{enter}")

Xpath not found

When executing the test case, this error is shown:
Button with locator 'xpath=//*[#id="stBanner"]/div[2]/a[2]' not found.
The element doesnt't have an id, and I have to use Xpath, but it can't be found.
This is the code when I inspect the element:
<div class="stRight">
<span id="mobileSearchIcon" class="glyphicon glyphicon-search"></span>
<!-- Logged in --><!-- Logged out -->
<a class="user-sts-link" href=" uri=nm:oid:Z6_72A2IA80O0US40QOM4JF0F30O3">REGISTER</a>
<a class="user-sts-link" href="?uri=nm:oid:Z6_72A2IA80O0CSB0Q4ODDFDQ0081">LOGIN</a>
</div>
This is the xpath:
//*[#id="stBanner"]/div[2]/a[2]
This is the testcase:
SeleniumLibrary.Open Browser #{tst3Url}[0] firefox
SeleniumLibrary.Click Button xpath=//*[#id="stBanner"]/div[2]/a[2]
Don't use the Click Button keyword - it is strictly for html elements of the <button> type.
Instead, use Click Element - your target element is an <a>, and with Click Elements the browser will execute the click on it.

Using page.at with CSS selector in Mechanize

I am trying to scrape a webpage with Mechanize, with the following structure:
<div id="searchResultsBox">
<div class="listings-wrap">
<div class="listings-header">
<div class="listing-cat">Category</div>
<div class="listing-name">Name</div>
</div>
<ul class="listings">
<li class="listing">
<a href="/ShowRatings.jsp?tid=1143052">
<span class="listing-cat">
<span class="icon"></span>
TEXT
</span>
<span class="listing-name">
<span class="main">TEXT</span>
<span class="sub">TEXT</span>
</span>
</a>
</li>
...
I want to navigate to the page behind the <a> HTML element. Right now, I have:
agent = Mechanize.new
page = agent.get("URL")
page = page.at('#searchResultsBox > div.listings-wrap > ul > li:nth-child(1) > a')
but it keeps returning NIL (verified by puts page.class).
I also tried using sleep to try to ensure that pages have time to load before continuing.
Is there anything I am doing wrong? I thought using the CSS selector would do the trick.
Maybe the website content is loaded dynamically, by JavaScript.
Inspect the content of your page variable and see if the content there is complete or not.
If the content is incomplete, it means that there has to be some other requests, to the serwer returning that data. You can search for them opening Chrome DevTools (or other tool). In the tab "Network" you will see all requests made by website. Search for the one containing data that you need and then scrape it by Mechanize.

Screen reader is not reading text inside div tag. (After div tag being focused)

I have question regarding screen reader. I have div tag that will get focus on button click. I am expecting screen reader to read automatically each and every words in that div tag once div tag get focus. Some how screen reader is not reading any thing on focus. If I will do the reverse tab meaning that on that page there are couple of more div tags. So if I will come on that div tag after reverse tab (Shift + tab) then screen reader will read every thing. Any comments for this missing words ??
This is my HTML code for that page. From previous page button click I will redirect tho this page and "information" div will get focus. So I am expecting screen reader to read everything when this div tag get focused but it is not reading. If I will tab again and go to back button again then if I will come to "information" div tag after do the reverse tabbing then screen reader will read everything automatically.
<body>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span id="label">Where isRecord Number ?</span><br>
<span id="text1">You'll find this number on a card.It's the number used when making appointments.</span><br>
<span id="text2">If you are in America don't include when entering the number.</span><br></div>
<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>
</body>
You are putting a hard break at the end of every sentence (<br>) so that causes the screen reader to pause as if you had a new paragraph.
You can get the same visual styling (one sentence on each line) if you use a style for your <span> instead of <br>.
To fix your example, remove the <br> at the end of the line and put a class= on each span and use display:block for your span. Something like this:
<style>
span.myspan {display:block}
</style>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span class='myspan' id="label">Where isRecord Number ?</span>
<span class='myspan' id="text1">You'll find this number on a card.It's the number used when making appointments.</span>
<span class='myspan' id="text2">If you are in America don't include when entering the number.</span><br></div>
<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>

jQuery - who is blocking my events?

I'm using the mmenu plugin on a page that's based on jquery-mobile. Mmenu gives me left and right sliders which work fine except for when I try to open a 'mobile-style' popup window. These messages / events aren't getting out.
I have other popup windows on this page so I know that the popup code works but when I try to use the same code inside the <li><a href="#popup" ... ></a></li> framework for mmenu it does nothing.
Chrome script debugger doesn't show any errors. The styles and markup are the same between the working and non-working buttons (when viewed in the debugger).
popup window
<div data-role="popup" id="optionsDialog" data-overlay-theme="a" data-theme="b"
data-dismissible="false" style="max-width:400px;" >
<div data-role="header" data-theme="a">
<h1>Options</h1>
</div>
<div role="main" class="ui-content">
Some options go here?<br>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-btn-b" data-rel="back">
Cancel
</a>
</div>
</div>
button to open popup
<a href="#optionsDialog" id="options_button" data-role="button"
data-mini="true" data-rel="popup" data-position-to="window"
data-transition="pop">
Show popup
</a>
How do I go about finding my missing events?
FWIW: No idea what mmenu is doing to stifle this event but it was solved by scripting as follows:
$( "#options_button" ).click( function()
{
$( "#optionsDialog" ).popup( "open", {} );
});
...
<li><a href="#" id="options_button" >Options</a></li>
plain old jQuery.

Resources