I'm running e2e tests with Protractor and Selenium on a Polymer/Angular App.
Most of the elements are in the shadow DOM (I managed to handle it with custom css locators but it made my tests unstable as any change in the dom breaks them). The problem is that the devs have implemented a virtual scroll list :
Only a few items are loaded in the scroll list, next ones are loaded when you scroll.
I asked my devs how to deal with it and they told me I had to get the web-component and test it without protractor aka running commands like this :
document.querySelector('virtual-scroll').baseList
Where baseList is a public property of the tag.
I tried
var element = browser.executeScript('return document.querySelector("virtual-scroll")');
element.then(function (el){
console.log(el.$.baseList);
});
but the command above returns a WebElement. Is there any way to return the HTML DOM element as a javascript querySelector command does ?
EDIT : as requested the source code with the property of the scrollList that I want to get
If "virtual-scroll" is name of the shadow root element and baseList is an attribute of the element. You can get it with command below.
var baseList = browser.executeScript('return document.querySelector("virtual-scroll").baseList');
By the way, you can test the shadow DOM with Selenium. See an example below.
var shadowRootElement = browser.executeScript('return document.querySelector("virtual-scroll").shadowRoot');
var element = shadowRootElement.findElement(......);
Related
My aim is to change the DOM of a page before the DOMContentLoaded event. Let's say my JS would look like the code below and I want to change a value of an element:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("Value of element foo: " + document.getElementById('foo').value);
});
I know to change the DOM with the JavascriptExecutor of Selenium WebDriver, but I'm missing how to get it to to execute right before 'DOMContentLoaded' (and maybe that's not the right approach).
// some hook or whatever to execute right before 'DOMContentLoaded' or wherever suitable
((JavascriptExecutor) webDriver).executeScript("document.getElementById('foo').value='hi there'");
In order to do that you will have to set the pageLoadStrategy from default normal to none.
This will pass the control to the next code line immediately after launching the page with driver.get() method without waiting for the page content to be loaded.
String selector = ".rmcAlertDialog .buttons :first-child";
RemoteWebElement selection = (RemoteWebElement) driver.findElement(By.cssSelector(selector));
WebDriverWait wait = new WebDriverWait(driver, 60);
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(selection));
if (element == selection) selection.click();
But the element in question (a button) is not responding to the click.
If I click the button manually it works so its not the web page at fault, but the automation.
I have verified the button is there by comparing it's text content.
updated for clarification
This code works (or worked) for most buttons. The code is from a script interpreter which is parsing:-
select ".rmcAlertDialog .buttons :first-child" click
This code was working prior to more recent versions of chrome/selenium/chromedriver.
The code now doesn't work for some buttons.
selection.click() IS being called (verified in a debugger), as element will always equal selection, it just is not working.
.buttons is the class name of the container div for the button(s)
The selector is not directing to the element with button class. You have a space between .button and :first-child in the selector. Remove the space. The given selector is searching for a child element of the tag with button class. But I'm assuming you are trying to click on the first element with button class not the child node of the button class element.
Use this:
String selector = ".rmcAlertDialog .buttons:first-child";
I think the main reason it's failing is because your if statement will never be true. I've never done any comparisons like this but you can simplify your code significantly and still get the desired effect.
A few suggestions:
Don't define locators as Strings, define them as Bys. The By class is defined for just such a task and makes using and passing them around MUCH easier.
String selector = ".rmcAlertDialog .buttons:first-child";
would turn into
By locator = By.cssSelector(".rmcAlertDialog .buttons:first-child");
Note the correction that S Ahmed pointed out in his answer.
You don't need to find the element to wait for it to be clickable. There is an overload that takes a By locator, use that instead.
RemoteWebElement selection = (RemoteWebElement) driver.findElement(By.cssSelector(selector));
WebDriverWait wait = new WebDriverWait(driver, 60);
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(selection));
becomes
WebElement element = new WebDriverWait(driver, 60).until(ExpectedConditions.elementToBeClickable(locator));
Skip the RemoteWebElement and WebElement comparison. I don't think this will work and there's no need for it anyway. Your locator will locate the same element consistently.
So your final code should look something like
By locator = By.cssSelector(".rmcAlertDialog .buttons:first-child");
new WebDriverWait(driver, 60).until(ExpectedConditions.elementToBeClickable(locator)).click();
I'm new in Selenium web driver and I facing some problems trying to locate DOM elements.
Let's say I have a bunch of <div class="column">...</div>, and inside them, I have a bunch of <div class="text">...</div>.
My question is: What is the better way to get a specific descendant and click it?
Below my code
var driver = new webdriver.Builder()
.forBrowser('chrome')
.build();
driver.get('http://www.localhost:4000/');
var columns = [];
driver.findElements(By.css('.column')).then(function(list) {
columns = list.slice();
columns[1].findElements(By.css('.text')).then(function(textList) {
textList[0].click();
});
});
You could combine the selectors and do:
driver.findElements(By.css('.column .text'))
which would locate all the elements with class text inside elements with class .column.
And, you could use the nth-child(), nth-of-type() or other pseudo classes to get to the elements by index inside the selectors, for instance:
driver.findElements(By.css('.column:nth-of-type(1) .text:nth-of-type(2)'))
I am working on an automation project which uses shadow DOMs extensively.
I use the execute_script function to access shadow root elements.
For example:
root = driver.execute_script('return document.querySelector(".flex.vertical.layout").shadowRoot')
Then I use the root element to access the elements within.
Since we have shadow root elements at many levels, this is annoying me a lot.
Is there any better solution to access elements within shadow root elements?
I am using Chrome 2.20 driver.
By googling I found another workaround for this problem - which is using the "/deep/ combinator".
For example, I was able to access all the shadow roots elements with
driver.find_elements_by_css_selector('body/deep/.layout.horizontal.center')
This will have access to the element with the compound class name layout horizontal center regardless of the number of shadow roots it has.
But this only works for the chromedriver and /deep/ is a deprecated approach.
The WebDriver spec still doesn't have anything specific to say about Shadow DOM.
Nor the Selenium project pages - which is understandable, as they closely follow the spec. Yet there is some low-level code in existence.
So, the short answer is: no, there is no special support in the spec, in Selenium's WebDriver API or implementation code at present.
Yes, the capability seems to exist in ChromeDriver 2.14 (as a wrapper around Chrome). However, as far as I can tell there are no Selenium or WebDriver-level bindings to let you use it.
But for more detail and possible workarounds, see also: Accessing Shadow DOM tree with Selenium, also: Accessing elements in the shadow DOM, and especially: Finding elements in the shadow DOM
You can write extension methods to operate on IWebElement to expand the root as below.
public static class SeleniumExtension
{
public static IWebElement ExpandRootElement(this IWebElement element, IWebDriver driver)
{
return (IWebElement)((IJavaScriptExecutor)driver)
.ExecuteScript("return arguments[0].shadowRoot", element);
}
}
You can use the above extension method to traverse through the element's hierarchy to reach the element of interest.
By downloads_manager_ShadowDom= By.TagName("downloads-manager");
By downloadToolBarShadowDom = By.CssSelector("downloads-toolbar");
By toolBarElement = By.CssSelector("cr-toolbar");
IWebElement ToolBarElement = driver.FindElement(downloads_manager_ShadowDom).ExpandRootElement(driver).FindElement(downloadToolBarShadowDom).ExpandRootElement(driver).FindElement(toolBarElement);
Trying to have this automated on Chrome I came up with an inelegant solution of recursively searching through each shadow dom explicitly using:
driver.executeScript(scriptToRun, cssSelector);
Here's the javascript (passed as a string):
function recursiveSearch(element, target) {
let result = element.querySelector(target);
if (result) { return result; }
let subElements = element.querySelectorAll("*");
for (let i = 0; i < subElements.length; i++) {
let subElement = subElements[i];
if (subElement && subElement.shadowRoot) {
let result = recursiveSearch(subElement.shadowRoot, target);
if (result) return result;
}
}
}
return recursiveSearch(document, arguments[0]);
Since the contents of a shadowRoot might be empty initially one can use driver.wait and until.elementIsVisible to avoid returning a null element.
Async example:
return await driver.wait(until.elementIsVisible(await driver.wait(async () => {
return await driver.executeScript(scriptToRun, cssSelector);
}, timeOut)));
Alternatively
My previous solution was to traverse the elements with shadowdoms explicitly, but is less autonomous. Same as above but with this script:
let element = document.querySelector(arguments[0][0]);
let selectors = arguments[0].slice(1);
for (i = 0; i < selectors.length; i++) {
if (!element || !element.shadowRoot) {return false;}
element = element.shadowRoot.querySelector(selectors[i]);
}
return element;
Where selectors would be something like:
['parentElement1', 'parentElement2', 'targetElement']
Sidenote
I found that running my automation tests on Firefox Quantum 57.0 doesn't suffer from hidden shadow doms, and any element can be found with a simple:
driver.findElement(searchQuery);
Since you use often that you may create a function, then the above becomes:
def select_shadow_element_by_css_selector(selector):
running_script = 'return document.querySelector("%s").shadowRoot' % selector
element = driver.execute_script(running_script)
return element
shadow_section = select_shadow_element_by_css_selector(".flex.vertical.layout")
shadow_section.find_element_by_css(".flex")
on the resulting element you can put any of the methods:
find_element_by_id
find_element_by_name
find_element_by_xpath
find_element_by_link_text
find_element_by_partial_link_text
find_element_by_tag_name
find_element_by_class_name
find_element_by_css_selector
To find multiple elements (these methods will return a list):
find_elements_by_name
find_elements_by_xpath
find_elements_by_link_text
find_elements_by_partial_link_text
find_elements_by_tag_name
find_elements_by_class_name
find_elements_by_css_selector
later edit:
Sometime the shadow host elements are hidden withing shadow trees that's why the best way to do it is to use the selenium selectors to find the shadow host elements and inject the script just to take the shadow root: :
def expand_shadow_element(element):
shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
return shadow_root
#the above becomes
shadow_section = expand_shadow_element(find_element_by_tag_name("neon-animatable"))
shadow_section.find_element_by_css(".flex")
To put this into perspective I just added a testable example with Chrome's download page, clicking the search button needs open 3 nested shadow root elements:
import selenium
from selenium import webdriver
driver = webdriver.Chrome()
def expand_shadow_element(element):
shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
return shadow_root
selenium.__file__
driver.get("chrome://downloads")
root1 = driver.find_element_by_tag_name('downloads-manager')
shadow_root1 = expand_shadow_element(root1)
root2 = shadow_root1.find_element_by_css_selector('downloads-toolbar')
shadow_root2 = expand_shadow_element(root2)
root3 = shadow_root2.find_element_by_css_selector('cr-search-field')
shadow_root3 = expand_shadow_element(root3)
search_button = shadow_root3.find_element_by_css_selector("#search-button")
search_button.click()
Not sure it works in all browsers, but for me
::shadow works fine in chromedriver 2.38 For example:
div::shadow div span::shadow a
Maybe you may use IJavaScriptExecutor?
IWebDriver driver;
IJavaScriptExecutor jsExecutor = (IJavaScriptExecutor)driver;
jsExecutor.ExecuteScript('yourShadowDom.func()');
I have been testing using Selenium WebDriver and I have been looking for an XPath code to get the value of the attribute of an HTML element as part of my regression testing. But I couldn't find a good answer.
Here is my sample html element:
<div class="firstdiv" alt="testdiv"></div>
I want to get the value of the "alt" attribute using the XPath. I have an XPath to get to the div element using the class attribute which is:
//div[#class="firstdiv"]
Now, I am looking for an XPath code to get the value of the "alt" attribute. The assumption is that I don't know what is the value of the "alt" attribute.
You can use the getAttribute() method.
driver.findElement(By.xpath("//div[#class='firstdiv']")).getAttribute("alt");
Using C#, .Net 4.5, and Selenium 2.45
Use findElements to capture firstdiv elements into a collection.
var firstDivCollection = driver.findElements(By.XPath("//div[#class='firstdiv']"));
Then iterate over the collection.
foreach (var div in firstDivCollection) {
div.GetAttribute("alt");
}
Just use executeScript and do XPath or querySelector/getAttribute in browser. Other solutions are wrong, because it takes forever to call getAttribute for each element from Selenium if you have more than a few.
var hrefsPromise = driver.executeScript(`
var elements = document.querySelectorAll('div.firstdiv');
elements = Array.prototype.slice.call(elements);
return elements.map(function (element) {
return element.getAttribute('alt');
});
`);
Selenium Xpath can only return elements.
You should pass javascript function that executes xpaths and returns strings to selenium.
I'm not sure why they made it this way. Xpath should support returning strings.