- Broken Images
- Context-Menu
- Drag & Drop
- File Download
- Iframe
- JS Alert
- Js Login/Basic-Auth-PopUp
- New Window
- Hover
- Page Objects
- Selectors
- Shadow-DOM
- Tables
- Waits
Broken Images
Can be found by the Javascript executor.
Broken images can be easily found by Javascript.
First we search all img-tags, and then check them with Javascript.
Context-Menu
There is a click method, but no right-click for the context menu…
For many actions that cannot be executed directly on the WebElement, there is the Actions class.
This class can be used to easily execute a context click.
Drag & Drop
There are 2 solutions.
Solution via Actions class (does not work for HTML5 Drag & Drop)
With the Actions class you can easily perform a drag & drop.
You have to specify the drag item and the drop zone, or the drag item and drop coordinates.
Drag & Drop mit Elementen:
Drag and drop with coordinates:
Solution with Javascript (works for HTML5 Drag & Drop)
Unfortunately, the HTML5 Drag & Drops do not work with the Actions class so far.
Therefore, the drag & drop must be executed via the javascript.
This can be done with the help of the following class and statement.
Statement:
Helper-Class:
File-Download
As soon as a download is triggered, a popup appears asking if you want to download or open the file.
This popup is outside the access area of Selenium, so you can’t just click on an option.
But you can configure when creating the driver that the file is saved directly and where it should be saved.
Chrome
Firefox
Internet Explorer
At the moment there is no solution implemented in InternetExplorer
RemoteWebdriver
It depends on the Vendor.
The Solution for Chrome, Firefox and the Vendor E34-Seleniumbox is in the Toolkit, so you only have to configure the Path of the download-folder.
Iframe Handling
The Problem
You are looking for an element that exists on a page, but Selenium does not find it.
If the selector is correct, this is usually because you are searching in the wrong document with Selenium.
Selenium looks at the iframe content as its an own document, so you have to switch the iframe.
How to handle
To switch the content you are working in, you need to give Selenium an instruction to do this.
For example, for an iframe named “testFrame”, this looks like this:
Now you should have access to the field, but remember that when you are working again in the main document, you have to switch back to the main document:
If you are in one IFrame and want to switch to another IFrame on the same level you can use the two commands in combination
So it is always important to be mindful of which content/frame you are in.
Javascript-Alert
Close Javascript Alert
If a javascript alert pops up, often the tests crash and you start looking for how to handle the alert.
With Selenium, an instruction must be given to switch to the alert.
After that the pop-up can be closed.
JS Login /BasicAuth-PopUp
We would like to explain 2 different login types:
1: Basic-authentication Popup handling
Unfortunately, Selenium cannot access the popup.
So we try to authenticate through URL so that the popup doesn’t open.
So we have to provide the user and the password as follows:
username:password@domain
2: Javascript-authentication Popup handling with 1 Field
If a javascript popup is displayed with a field, then you can switch to the alert and use “sendKeys” to fill the field. Have a look at the help for “JS Alert”.
Otherwise
Unfortunately, Selenium is not allowed to access the certificate selection or other authentication windows. Therefore there is no other solution, unless you use a proxy, which takes over the authentication.
New Window
In Selenium there is a WindowHandle for each open tab.
The current handle and a list of all existing handles can be read out.
With the help of these handle strings the window can be changed.
It is advisable not to have too many windows open, if possible only the main test window and one more. It will be easier to keep the overview and you can use the following helpfull methods to change the window and close all windows except the current one:
Hover
How to move the mouse over an element.
For many actions that cannot be executed directly on the WebElement, there is the Actions class.
This class can be used to easily execute a mouse move.
PageObjects
Comming Soon.
Selectors
The different selectors
ID
The Id selector is one of the simplest and most efficient selectors.
But there are programming languages which concatenate the Id’s like e.g. JSF.
Because of this the Html structure is included in the Id’s and the Id’s are not stable selectors anymore.
Also with tables there can be problems, because several rows must not have the same Id, more about this in the topic “tables”.
Name
The name attribute is not present on all tags, so it cannot be used as a general selector.
TagName
By using the TagNames the tests are very focused on the structure of the Htmls.
It should be prevented that selectors have to be rewritten, if the HTML changes during the daily work in the structure.
Therefore some maintanance work has to be expected.
Because of this we do not recommend this selector, its to unstable and will generate to much work.
ClassName
The classes are designed for styling the html.
But they are very suitable as selectors.
The class attribute is present on all elements and does not have to be unique.
But it is recommended that the Selenium Classes are prefixt with e.g. a “SE_”.
This ensures that these classes are recognized and not deleted during a redesign.
CssSelektor
The CssSelector is mostly very styling oriented.
If only an Id or a ClassName is accessed or used in combination, then the selector can be very useful.
With the CssSelectors, as with the TagNames, the focus is on the structure of the Htmls.
In this case this selectors will generate a lot of Maintanance work like the TageName-Selector.
LinkText
This selector is used to access the visual text.
This does not work if the web page is to be tested in several languages without providing something for it in the test.
If the text is adapted, the test must also be adapted.
For these two reasons, this selector is generally not recommended.
Xpath
The XPath selector is the most powerful selector, because with it all possibilities of the other selectors are open and even more.
So, this selector can neither be advised against nor recommended. It depends completely on the use.
It is in any case advisable to have know-how with xPaht, if you will work with this selectors.
Our recommendation: Define an own data-attribute
You can define your own data attributes on all html tags.
It is recommended to decide on a standardized name such as data-seleniumid=”id”.
The selector matching the example would be an XPaht selector: “//*[@data-seleniumid=’id’]”.
This attribute brings the same benefits as the ClassName. Additionally, styling (ClassName) is not mixed with testing selectors.
It is also easy to see which fields are already “Ready for Testing”.
The data attributes exist in almost all programming languages. If these are taken over e.g. during a redesign (name-input field still has the same data-seleniumid), the tests usually even work after.
It will keep your Maintanance work down if the Ids are assigned meaningfully and continuously.
ShadowDOM Handling
The problem is that Selenium does not recognize the shadow DOM as a Dom structure with childs. Therefore, the childs cannot be accessed easily...
The shadowRoot can be accessed via Javascript. This can be returned to the Java. You can use this Method, you have to pass the ShadowRoot:
On the return web element you can then search for the child elements using findElement(s). .
Attention: Some by’s do not work inside the shadow DOM.
The following by’s will work: By.id, By.className and By.cssSelector
By.xPath results in the error:
By.name results in the error:
By.tagName results in the error:
Table-Handling
The Problem
When working with tables, you often see the Row-Index in the Id.
This is a common method, because the Id (html-technically) must be assigned only once inside the same container.
However, for Selenium this is exactly the reason why the Id is not the best selector.
Imagine you need to access the 0th element, but your colleague needs to access the 5th and someone else wants to know how many elements are in the list. Then you have define a lot methods to do it.
The best way to handle it is to solve this with XPath and say id begins with.
The other unattractive possibility is that you access the table and from there all
The FindElements-Solution
If you give e.g. every row in the table the same class or e.g. data-seleniumId (see Selectors), you can do all this very easily.
Selenium can also search and return a list instead of a single element.
So if you search on this variant you will get a list of WebElements, which represent your rows in the table. In this list you can access the elements normally with the get-methods or the size with the size-method.
For example, if the rows in your table have the class “se_row”, the code would look like this:
Waits
Who does not already know the NoSuchElementException
In many cases, the reason is that you have not waited long enough, and therefore the element is not yet on the page. For this reason, it is advisable to learn about the different waiting mechanisms with Selenium.
There are principally 3 different waiting mechanisms:
1 Implicit Wait:
In the simplest cases the element is not yet in the DOM. By setting the implicit wait, Selenium tries again and again to find the element in the DOM for the specified duration. Only when the time has expired, the exception is thrown. The duration starts over with every element search.
For example, the wait is set for 10 seconds as follows:
2. Explicit Wait:
Unfortunately, the implicit wait is not always enough, especially with the JS frontend languages.
This is because the elements are often already in the DOM, but are simply not displayed yet, for example.
Since the Implicit Wait is waiting for the element to appear in the DOM, it does not work.
Attention: Selenium does not return an exception if the element is not visible.
However, with getText(), for example, you get back an empty string because the text is not visible.
It is advisable to build an explicit wait in such cases. This offers various methods to wait for an element. For example, it is possible to wait until an element becomes visible. Here you can also specify the maximum time (in seconds). Optionally, you can specify how long you want to wait between trials, the default is every 500 milliseconds.
The Explixit Wait looks like this:
3. Fluent Wait:
The Fluent Wait is very rarely used, because the Explicit Wait actually already offers all possibilities and the WebDriverWait extends the FluentWait anyway. You have the possibility to define your own SLEEPER or your own CLOCK. You can define exceptions, which should be ignored.
This looks for example as follows:
4. Tip for a javascript wait mechanism:
Often the question occurs with Angular or also Ajax calls, how you can wait there best.
Basically, it is simplest if you display a loading indicator on the page or solve the whole thing with a Javascript flag.
Loading indicator:
On the one hand, the loading indicator has the nice effect of letting your users know when something is happening on the page. On the other hand, you can then use the Explicit Wait to wait for the loading indicator to appear and then disappear.
Javascript flag:
You can of course also introduce a javascript flag in your application, e.g. document.bussy.
You set this flag to True if the page is reloaded so that Selenium should wait.
And to False, if the reloading was finished. From Selenium you can easily access the flag, this looks like this:
(of course you can swap out the new ExpectedCondition so you can use this again and again).
Let’s Get Started
Your connection is the cornerstone of our success