is it possbile to locate an element created by javascript using webdriver? - selenium-webdriver

In firebug, I used element inspector to locate an element, and then use the name of that element to locate the element in webdriver by function of findElementByName, but it complains it can't find that element. The element is transformed by javascript, as I can't find it using "view page source". So is it possible to locate such element in webdriver?

can you provide some more details at least the html?
What I am assuming that you have to wait until your javaScript finish loading. Use this
if your application use jQuery. And then find the element using attribute. In that case you have to be perfect with the selector.
Something like this should work I am thinking.
By.CssSelector("[type='checkbox']") //attribute = attribute value

Related

test is failing to locate element and giving error "no such element: Unable to locate element"

I am trying to locate an element but it is giving me
"no such element: Unable to locate element".
My element is below link:
View
Xpath=//a[#href='/Admin/Company/View?id=225896']
Xpath=//*[contains(#href,'/Admin/Company/View?id=225896')]
Xpath=//*[contains(#href,'View?id=225896')]
and many more. How do I solve the problem?
use this.
//*[local-name()='a'][#href='/Admin/Company/View?id=225896']
Make sure that the element is not in an iframe otherwise you will have to switch to it before locating
Make sure that the element is not in the Shadow Dom otherwise you will have to locate the relevant ShadowRoot object first and then use relative locators from the ShadowRoot
Make sure that the element is present in the DOM by the time you're trying to find it, i.e. execute getPageSource() function and ensure that it's there as it might be the case you will need to go for Explicit Wait if the element is added to the DOM via i.e. AJAX call
And last but not the least, try locating the element by link text using View as the criteria
driver.findElement(By.linkText("View"))

Application of DOM locators in Selenium

I understood DOM locators but I don't know how to apply and locate the elements using DOM locators. I automate using Selenium with java but in DOM we have to locate writing document.getElementById("id of the element"). Copying same thing in Java code gives me error. Does any Library needs to be imported to use DOM locators or something else ?
If you want to use document.getElementById function inside your Java Selenium tests you can go for JavaScriptExecutor.executeScript() method like:
WebElement element = (WebElement) driver.executeScript("return document.getElementById('id of the element');");
however much easier would be using WebDriver.findElement(By.Id)
WebElement element = driver.findElement(By.id("id of the element"));
it is less code, more clear, faster and you will be able to use Explicit Waits in case of testing AJAX applications
WebElement element = new WebDriverWait(driver,10)
.until(ExpectedConditions
.presenceOfElementLocated(By.id("id of the element")));

Protractor does not see dynamically insertered html

I have to insert HTML into view dynamically. Inserted code contains angular directives. I found the way to do this using directives:
http://jsfiddle.net/e4zrusgw/
I would like to create e2e test using Protractor. Unfortunately Protractor does not see elements from dynamically inserted HTML. For example, if inserted code contains
<button>Cancel</button>
and I try to get access to this button in protractor specification:
element(by.buttonText('Cancel'));
I get:
ElementNotVisibleError: element not visible
Does anyone have the same problem?
Piotrek.
Problem solved. The solution is to use browser.driver object, for example:
browser.driver.findElement(by.id('accept-button'))
instead of
element(by.id('accept-button'));

Angular e2e testing. How to click dom elements ? (buttons links)

This is being done using angular 1.1.X
If there is a dom element that doesnt have a unique class or id how is one supposed to find it in order to do an element().click(); ?
is this something one would just use the full version of jquery for or is there a way to do it with angulars jqueryLite ?
ie if one has a list of links , how would you select the first element of the list using angular?
You can use generic jquery selectors to find elements.. here's some code from my e2e tests. Note especially the :eq(3) selector for taking the 4th anchor tag.
it('The cancel button should close the form and revert the info', function() {
input("ci.customer.name").enter("Tom Selleck")
element('#customerinfo input[value="Cancel"]').click();
// check pdfdata to make sure it got reflected
element('.navbar a:eq(3)').click();
expect(element('.navbar a:eq(2)').text()).not().toBe("Customer (Tom Selleck)");
});

How can I select elements in ExtJS?

I have a ExtJS page that is outputting the following DOM.
I want to select a specific element so that I can respond to a click on it.
However, the following code never selected the elements that are built with the extJS library. JQuery can't seem to select them either.
ExtJS can't even find an element that is defined in the <body> element in the HTML file itself. However, JQuery can indeed select an element defined in the <body> element.
I have been reading this guide which seems to indicate it should be no problem to just use Ext.get() and Ext.select() to get elements, however, as the following code shows, the elements are never selected.
How do I select an element in ExtJS?
var members = Ext.select('x-panel');
for (var i = members.length - 1; i >= 0; i--){
element = members[i];
element.on('click', function() { alert('test');})
};
Try Ext.select('.x-panel') with a period in the selector, which is required for selecting by class name.
bmoeskau is right, you can use Ext.select('.x-panel') which returns a collection of divs with class x-panel.
Note that Ext.get() just returns a single element, so if you want to get multiple matches you should use Ext.select() or Ext.query().
And what's more, Ext.select() returns Ext.CompositeElement, though the document does not list but it supports all the methods of Ext.Element so your example can be simply written as:
Ext.select('.x-panel').on('click', function(){ alert('test') });
Code above will add event handler for click operation to each x-panel.
Use:
Ext.get(el);
if you need to get the flyweight element, use:
Ext.fly(el);
See the API documentation for the Static Ext object for details

Resources