what element to use for click event handler? - ajax

I deal with a question.
I want to load some content via ajax when user click on a text.
Does it matter to use <a> element or <span> element for this text while we can call click() for both of them?
Does it matter for search engines crawlers as I know from before they don't run js codes?

Related

Selenium access element outside DOM

I'm writing automated test using Selenium WebDriver and ruby. I faced with such problem:
I need to close popup, but close-button for popup is outside DOM. In DOM I have div element with class 'promotional-wrapper' and this element have attribute data-mage-init='{"promoPopUp": {"url": {"getDataUrl": url from where DOM is updated with new nodes}}}' This div is responsible for getting popup into the page.
How to access element not directly attached to DOM?
Classic methods to get element by xpath fail, I get 'Stale Element Reference Exception'.
But interesting that when I accidentally ignored popup and wanted to click somewhere else click was intercepted by popup.
I think the pop up is being added to the DOM after you click.
so you should:
click the //div[#class='promotional-wrapper'] element
Wait for popup [exact locator TBD]
then search for element you want to interact with
The popup WILL be in the DOM after you launch it. Unless the popup is another window, in which case you will need to learn to deal with switching to windows: https://stackoverflow.com/a/36429462/1387701

Using Capybara to interact with lazy loading elements

Currently I have trouble in with interacting with the elements within the page using lazy loading. I need to select the list of items (which mostly from top till the bottom of page, up to like 100 items). With the lazy loading implemented, i could only select a portion of it, like 1/3 of that since they split all the items into 3 different portions then it will only load the the first portion. I found out using a tricky Javascript could help to scroll it to the bottom like page.execute_script("window.scrollTo(0,100000)"), then i could probably get all the items.
but should be saving that as the last option.
So, my question is Does Capybara support to interact with Lazy Loading stuff like that . Also what should I do to get the whole items, without using that Javascript ?
If you're just scraping data from a site then the easiest solution is going to be just using execute_script to scroll the page. If however you're testing an app behaves correctly then you want to stay away from execute_script since it can allow you to do things a user never could which may invalidate your tests. Instead use hover to move the mouse pointer over an element on the page that would trigger loading the next portion. For instance if you have a list of items showing up
<ul id="my_list_of_items">
<li class="item"></li>
<li class="item"></li>
...
<li class="item"></li>
</ul>
and the next group of items are loaded into the page when the bottom of the list is scrolled into view then do something like
find('.item:last-child').hover
This will cause the last item element on the page to be scrolled into view and the move pointer moved over it, which would then trigger loading of more items.

WebDriver: Check that Ajax call returns no items for populating a drop down list

How to check that Ajax call returns no items for populating a drop down list with WebDriver?
I've tried different timeout and waiting options for elements. Nothing works.
From the user perspective, he enters some value in the text field, waits for ajax call return and then empty dropdown list appears and suddenly disappears.
So suppose I have autosuggest input field (like google search) and I need to be sure that there were no auto suggestions for the selected input.
Hard to tell without seeing the markup, but there is usually a container (probably a <div> element) for showing the ajax results, it is probably hidden (ie using display: none;) and becomes visible after databinding occurs. If i were you, i would locate that element and use it in WebDriverWait, perhaps using ExpecedConditions.invisibilityOfElementLocated

How to change DIV content in a different page?

I know there is ways to change DIV content within a single page. Using Ajax for example to dynamically get div content from an external .html file and then replace Div content using load or get functions.
However, is there a way to do this on a different page?
For example, say there is 2 pages. One.html, and Two.html.
I want a button on the first page (One.html), that when clicked, will change DIV content (by default the div box is empty, I want the button to insert text into the box basically) for a specific DIV Id on page 2 (Two.html).
So the process is basically: Click button on One.html, some function gets div content from external html (Three.html for example), and the uses that content to update an empty div on Two.html. Also, I would like to load some basic CSS in a similar fashion. Not only insert text into the box, but also change the background color and text color.
Thank You!
You just store the info and send it to the next page, say, with the HTTP request and submit methods get and post.
http://www.w3schools.com/tags/ref_httpmethods.asp

Mozilla firefox problem in javascript

how i can get (if)any text is selected in textbox and i want to get it in any variable of javascript.... specifically for Mozilla firefox...?
the above description is not enough so let me give completely the definition.. My Extension of firefox is an Extension that double clicks any word from the webpage and finds its possible meaning from database... so user can even write anything in Textbox and double click the same for finding its meaning.. so please do suggest any way to complete selection from textbox's selected text....? in addition i am already using dblclick event handler so dont suggest that solution.... Also the problem is that the web page can be any site's webpage so even the textarea or any control is specific tho that page how could i slice the text from it than ...Thanxx in advance....
You can use document.getSelection() which returns a selection object containing the currently highlighted text in the document. However, calling it at the right time can be tricky. You can't do it from an onclick handler on a button, for instance, because by the time the onclick handler fires, the selection's focus has been removed from the text and moved to the button.
Use the selectionStart and selectionEnd properties e.g.
var selectedText = textbox.value.slice(textbox.selectionStart, textbox.selectionEnd);

Resources