TestCafe Visibility check techniques - testing

Is there any functional difference between:
await t.expect(Selector('button').visible).ok();
and
await Selector('button', {visibilityCheck: true})
?
As I understand, it does the same thing? If the selector is not visible the test will fail in both cases?
If it is different, can you give me the exact example showing the situation when it is different?
Best Regards,
Anna

In the second case, the test will not fail, perhaps you mean
await t.expect(Selector(‘button’, {visibilityCheck: true}).exists).ok();
The best way to check whether an element is visible is to use its visible property as you do in your first code example.
The visibilityCheck option works in a different way: if it's enabled, TestCafe requires an element in an assertion to be visible. Otherwise, the test fails. For example, the following assertion fails:
await t.expect(Selector(‘button’, { visibilityCheck: true }).value).eql('value');
// Error: Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.
In this case, TestCafe tries to find a visible element by using the selector, but can't find it (since the element is invisible).

Related

Click on element if exists

I want to use setInterval and to try for five times to check if element exists (a button). If it exists, I want to click it and to proceed after it and, if not, I want to just proceed.
How to do so?
This is not the correct way with webdriver that is the underlying API in UIVeri5. The right way is to use the browser.driver.wait() with a predicate that checks for the condition.
But such polling should not be necessary at all with UIVeri5 when working against a UI5 application because UIVeri5 handles the waiting automatically. With the limitation that this magic works only in UI5 apps because it depends on the UI5 runtime to detect when the UI5 app is ready. So when writing tests for UI5, you don't need any pollings, you just write element(by.control()).isDisplayed() and it works fine and perfectly reliable. The check will happen at the correct time - when ui5 app is fully rendered and no polling is necessary.
Based on #Max, I am just writing the answer in a more dummy proof way:
If one needs to check if a button or something else is displayed, isDisplayed() should be called. isDisplayed() is a promise and, if the element is displayed, then in the then() resolution the continuation should be called. If the element is not displayed, the callback should be called in the catch() resolution of the promise.
Example:
iCheckForElementAndContinue: function(callback) {
element.isDisplayed()
.then({
// Element is found
if (callback) {
callback();
}
})
.catch({
// Element is not found
if (callback) {
callback();
}
});
}

Selenium tests fail with azure pipeline sometimes and pass locally

Test cases fail while not finding a link or any validation messages after a button click.
I used explicit waits for page to load:
var waitForDocumentReady = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(10));
waitForDocumentReady.Until((wdriver) => (WebDriver as IJavaScriptExecutor).ExecuteScript("return document.readyState").Equals("complete"));
For wait specific div of validation messages:
WebDriverWait wait = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(10));
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementExists(By.ClassName("validationErrors")));
But test cases pass sometimes with pipeline and fails sometimes.
I would recommend following:
When ever your tests fail take a snapshot at that moment.
sometimes when you run your tests locally the network communication
is a bit faster than running on server. Which means a spinner or a
loading control may not appear locally because results were retrieved
fast enough but the loader will appear when there is delay from
server in sending the response to client.
If you are trying to run your tests in FF headless on remote grid
setup then it is not yet stable in my experience.
Identify the pattern in failed scenarios which frequently fail and
try and run them multiple times in a loop and identify the pattern of
failure. In one of my case there was an actual bug in the performance
of the application which used to get reproduced whenever the tests
ran immediately in bulk
I was having this issue, except my test would always fail in Azure Pipelines but pass locally. Not running in "headless" mode fixed my problem. To do this, make sure "Test mix contains UI tests" is checked in your "Visual Studio Test" task.
There are a couple of things you need to take care as follows:
Test cases fail while not finding a link or any validation messages after a button click: A lot depends on the attributes of the button. In case the button contains either of the following attributes/events the DOM Tree would be getting updated and subsequently trying to find the desired element may fail:
onclick() event:
<button onclick="myFunction()">Click me</button>
jQuery click() Event:
$("p").click(function(){
alert("The paragraph was clicked.");
});
So after a button click, to find the desired element you need to induce you have to induce WebDriverWait for the ElementExists().
You can find a relevant discussion in ExpectedConditions.ElementIsVisible returns TimeoutException even when element is present
ExecuteScript("return document.readyState").Equals("complete"): This line of code is not that effective to ensure if the desired element(s) are present/visible/interactable with in the HTML DOM.
You can find a relevant discussion in Do we have any generic function to check if page has completely loaded in Selenium
However to wait for specific div with ElementExists() should have worked. The relevant HTML would have helped us to analyze what went wrong. However, if the validationErrors related element is based on HTML5 Constraint validation then you have to use the GetAttribute() method.
You can find a relevant discussion in How to handle html5 constraint validation pop-up using Selenium?

Robot Framework+Selenium: how to avoid "stale element" error (flaky test)?

I'm using Robot Framework and Selenium to test a website that has a language selector. I need to be able to select a language and then verify the page has actually changed to that language.
Since after choosing a new language the value in the lang attribute of the <html> tag changes, I decided I would use that to validate the language has been successfully changed. But I'm getting flaky results, as my test sometimes passes and sometimes doesn't.
This is the definition of the keyword I'm using:
CHANGE LANGUAGE
[Arguments] ${lang}
Select From List By Value ${LANGUAGE SWITCH} ?hl=${lang}
Wait Until Page Contains Element css=html
${doc lang} Get Element Attribute css=html#lang
Should Be True '${doc lang}'=='${lang}' timeout=15s
Since I have to execute this keyword quite a few times (one per each available language), I keep getting pretty often the dreaded "stale element" error: | FAIL | stale element reference: element is not attached to the page document.
I read through this article and a few other questions in here and understand this could happen if an element reference is updated after obtaining it. However, I'm not sure how exactly I should modify my keyword to avoid getting this error.
Using the information that everyone has so kindly provided, I may have found a potential fix (not sure if it's robust enough not to throw the exception anymore, but after a few test runs they have all passed): I added a "Wait Until Keyword Succeeds" and moved the language validation to a new keyword:
VALIDATE PAGE LANGUAGE
[Arguments] ${lang}
${doc lang} Get Element Attribute css=html#lang
Should Be True '${doc lang}'=='${lang}'
CHANGE LANGUAGE
[Arguments] ${lang}
Select From List By Value ${LANGUAGE SWITCH} ?hl=${lang}
Wait For Condition return document.readyState=="complete"
Wait Until Keyword Succeeds 5 5s VALIDATE PAGE LANGUAGE ${lang}
Then I call this "CHANGE LANGUAGE" keyword as many times as languages I need to test.
I added this as an answer instead of a comment so I could show the code in a more readable way.
In order to wait for a page to be ready to test after a user action (clicking a link or button, for example), the algorithm I've found that seems to be almost bulletproof is this:
get a reference to the html element
perform the action that will cause the page to change (eg: click a link or button)
wait for the html element to go stale - this signals that the refresh has started
wait for document.readyState to be "complete"
Step 4 may not be necessary, but it doesn't hurt.
This has worked extremely well for my team. This can still fail since you might have some async javascript that runs after document.readyState has been set, but there's simply no generic solution to that.
If your pages have a bunch of async javascript, you'll have to come up with your own scheme to know when the page is finally ready to be tested. For example, the last job to complete could set a flag, or you could wait until there are no pending async jobs, etc.
I'm not sure if you can do the above with robot keywords since it relies on the selenium staleness_of condition. It's pretty easy to implement in python, though.
The inspiration for this solution came from this blog post: How to get Selenium to wait for page load after a click
If you use my page object library for robot, this is built-in as a context manager.
As highlighted, a Stale Element error typically means that between the element retrieval and the corresponding action the element changed. Often this is due to a page refresh.
For this reason it is important to invest in a robust waiting approach. Not guessing that your page/application has completed loading, but instead knowing it has completed. This will not only prevent Stale Element errors but also speed up your tests as you're not unnecessarily waiting.
As the Get Element Attribute ${DOCUMENT}#lang is causing the stale element error and the Select From List By Value ${LANGUAGE SWITCH} ?hl=${lang} is causing the page refresh, then that leaves the Wait Until Page Contains Element html as your waiting approach.
As the <html> tag is always present and the first to be loaded in the DOM, this is not the best tag to wait for. I'd advise something unique for the loaded page or the last element of that page. Though I have to stress that this still constitutes to guessing the page has loaded.
It is better to invest in a robust waiting approach. Especially if your application is using a framework like Angular, React or jQuery then you have several Javascript markers to help you with this. For some frameworks there are even custom Robot Framework Libraries that support their specific markers.
Should your application not use a framework, then talk to your developers and have them develop this for you. Simplest would be a visible spinner, but a Javascript function that returns True will work just as well.
I have created a custom keyword when ever i want to click an element or perform and action i would call this custom keyword . This custom keyword uses the built-in keyword 'Wait Until Keyword Succeeds' which runs the specified keyword and retries if it fails. through this built-in keyword the number of retry's and the time to wait before trying to run the keyword again after the previous run has failed can be configured.
This custom keyword would call another custom keyword where three SeleniumLibrary keywords would be called. The first one would Waits until element locator is enabled keyword, which would wait until the element is not disabled nor read-only. Once the element is enabled then focus would be taken to the element where we are going to perform action. Finally perform the action. All these precautions has prevented me from Stale Element error.
HighLevelKeyword_Identify And Click Element
[Arguments] ${locator}
Wait Until Keyword Succeeds ${RETRY_ATTEMPTS} ${RETRY_AFTER} Identify And Click Element ${locator}
Identify And Click Element
[Arguments] ${locator}
Wait Until Element Is Enabled ${locator}
Set Focus To Element ${locator}
Click Element ${locator}

.isDisplayed()--> never returns False why? in Selenium Webdriver

.isDisplayed()--> never returns False why? it always give No Such Element Exception though i am using try catch block.
try {
boolean status_second= Appointment_Booking_page.second_confirmation.isDisplayed();
System.out.println("Current Second Appointment booking status-->" + status_second);
}
catch (NoSuchElementException e) {
}
Please suggest for same.
Is displayed is not giving you false because even before that method is executed ,NoSuchElementException is occured.
isDisplayed is used in cases where element is present in DOM and you need to check whether it is displayed or not in the UI. It is never used to check whether an element is present in the DOM.
Your questions is correct, isDisplayed will display True for the all the element that are present , anything else will definitely go to NoSuchElementException. This is correct only for the element which are displayed in the UI , check with an element that is not displayed example Hidden Elements, or for that matter the element which is displayed only after scrolling, i believe in these scenarios it should display False.
Here is another question regarding same:
https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/1880
It is not True that .isDisplayed() method never returns False.
In your case .isDisplayed() method is invoked through Appointment_Booking_page.second_confirmation which is your possible Strategy to locate an webelement. As the Locator Strategy you have adapted doesn't identifies the intended webelement uniquely so (even before .isDisplayed() is invoked) NoSuchElementException is thrown and your program terminates.
It is worth to mention, even if the webelement is present on the Web Page but not within the Viewport, .isDisplayed() method can still return False.
isDisplayed() is the method used to verify presence of a web element within the webpage. The method is designed to result from a Boolean value with each success and failure. The method returns a “true” value if the specified web element is present on the web page and a “false” value if the web element is not present on the web page
There is a lot of confusion around why isDisplayed method not returns false instead it throws NoSuchElementException ; the problem is with the understanding of when to use isDisplayed method
isDisplayed throws NoSuchElementException because the element isn't present in the DOM; (try inspecting element using your locating strategy for which you are getting the above exception in the browser using firepath or any developer tool in browser and you will see that your locating strategy has found 0 match elements)
When to use isDisplayed?
.isDisplayed() exists to tell you whether the element, which has already been located i.e. your element is present in the DOM(try inspecting element and you should find match element),is visible on the page; i.e. whether its width and height are greater than zero, it
isn't hidden by CSS, etc. If the element is present on the page, but has style="display:none;" then isDisplayed() will return false.
what is meant by above statement is although you have matching element but as the element got hidden by CSS thus you are getting false

Selenium: Ajax Testing

Please brief me about the Ajax testing with selenium RC.
As in Ajax element not reflect on the view-source, but using firebug we can see the changes in HTML source code.
There are two methods associated with it Ajax testing..
1-The method "waitForCondition (java.lang.String script, java.lang.String timeout), to provide script we have to create a java script by own or it should be the same Ajax script/java script present on the web page.
Please correct me if i am wrong on below point..
2-The method "waitForElemantPresent(Locator)", We check the Element in the firebug and check the same in this method is self waitForElemantPresent(Locator).
Let me know if anything else I am missing testing Ajax application.
I got help on this from one article and with help of #Hannibal
http://agilesoftwaretesting.com/?p=111
JQuery: “jQuery.active”
Prototype: “Ajax.activeRequestCount”
Dojo: “dojo.io.XMLHTTPTransport.inFlight.length”
So if there is Ajax call we can use second option.
selenium.waitForCondition(
"selenium.browserbot.getCurrentWindow().jQuery.active == 0",
timeout);
To answer your first point, yes waitForCondition(javascript,timeout) will run the javascript till it returns a true value OR when timeout happens. You should take a look at the api documentation for this as you need to use browserbot to run the script in your application window. Link to API documentation is here
In Selenium 1, one way by which you can handle the Ajax conditions are by creating custom functions which will wait till the condition is met or till a timeout happens. While a normal Selenium.isElementPresent will fail immediately if the element is not present, your custom function will wait for some more time (the time for Ajax to load) before it fails. As an example you can refer the following custom method for isElementPresent. This is written in JAVA, you should be able to use the same logic in the programming language that you use.
public boolean AjaxIsElementPresent(String elementToLookFor, int timeOutValueInSeconds){
int timer=1;
while(timer<=timeOutValue){
if(selenium.isElementPresent(locator))
return true;
else
Thread.sleep(1000);
}
return false;
}
This method will return a boolean false if the element is not present even after the specified timeoutValue. If it finds the element within the timeoutvalue then it returns a true.
I have seen some in built functions for AjaxCondition handling in Selenium 2. But I have not used it. You can refer to Selenium 2 code base