I have this problem where I have to validate if a loading spinner is present, it's present for about 1 second on the page, i have found the xpath selector of the loading spinner but selenium library could not find it is there another way to find out a selector of something that dissapears after a short while? Note: The xpath is definitely correct. There is no id on the loading spinner either.
This is the code i have tried
Validate Loading Spinner
Wait until page contains xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
I have also tried Element should contain and Page should contain but that does not find the locator.
You should be using one of the keywords that is validating an element is present - Wait Until Element Is Visible, or Wait Until Page Contains Element - both of which support a timeout argument, for how much to wait.
Afterwards, you'd better use the opposite keyword - Wait Until Element Is Not Visible, to make sure the spinner disappears and you can continue with the test.
There is a problem with your locator - xpath has some issues if the element is svg, most of the times it can't address it directly. So instead of specifying it explicitly in the path, look for a node whose name happens to be "svg"; e.g.:
xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/*[local-name() = "svg"]
(^ changed the last element in the path)
Slightly offtopic - try to have less rigid locators - this one specifies an absolute path from the element with id "app" and down (a div child, then its first div child, then that one's third div child, and so on and so forth). If the element structure changes even slightly, the locator will stop working (say, in a bug fix, or re-positioning it, or just with using a HF of an JS library).
Try to find an element that's 1-2 levels higher than your target svg - by a solid class value, or structure that's unique, and use it as an anchor.
I reckon you used wrong keyword
Validate Loading Spinner
Wait until page contains ELEMENT xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
Both work:
Validate Loading Spinner
wait until page contains element xpath=//*
[#id="app"]/div/div[1]/div[3]/div/div/div/div/*[local-name() = "svg"]
and
Wait until page contains ELEMENT xpath=//*[#id="app"]/div/div[1]/div[3]/div/div/div/div/svg
I had a very similar issue
Related
I'm trying to wait till the preloader appears on the website for that I'm using ExpectedConditions.invisibilityOfElementLocated but initially when I was locating preloader through the class name "DarkBg", the explicit wait didn't wait for the preloader to get invisible but later when I located through Id then the explicit wait worked and waited till the loader disappeared.
I've attached the loader image along with its source code. I want to know why the explicit wait through classname locator didn't work?
While using ExpectedConditions invisibilityOfElementLocated() with the classname DarkBg, the element seems to be a <div> node which seems to be the parent of the actual overlay in the form of the <img> node. This <div> node includes only the style height and may be either bigger then the Viewport (or out of the Viewport) and can be the possible reason behind Selenium unable to interact with it:
Where as the <img> tag seems to be have all the required style attributes present to be within the Viewport and interactable in the form of width, height, top, etc.
Hence Selenium easily detects it.
I am writing an automation script for an avatar upload module with the following CSS locator:
input[accept="image/png,image/jpeg,image/gif,image/bmp"]
I am using Robot Framework's Wait Until Element Is Visible keyword to look for the locator above but is unsuccessful with the error:
Element 'css=input[accept="image/png,image/jpeg,image/gif,image/bmp"]' not visible after 30 seconds.
Increasing the timeout also doesn't work. Using the same in Chrome Dev Tools would successfully find the element. My guess is that the commas/slashes are messing with Robot's locator parsing. My question is: What is the correct way to write the locator?
Though present in the DOM, an element may not be visible/rendered. This is very often the case with file upload input elements - the UI renders something different, a button, div that had applied styling and fits in better with the overall design.
Thus a check is it visible will rightfully fail. Change your pre-usage approach to validate the input is in the HTML - this is actually the same as what you did in the browser's dev tools - with the Page Should Contain Element keyword, and proceed on success.
There is no problem with the CSS locator your are using. Maybe the element is in another iframe?
how does equals work on webElement, can I use it to check if the same element has been completely loaded?
For elements with animation, would equals return true imply the element returned by findElement at different time stamp are identical in look?
Say
webElemenet ele1 = driver.findElement(By.class("loading"));
sleep(10);
webElemenet ele2 = driver.findElement(By.class("loading"));
Would ele1.equals(ele2) == true, imply the element is completely loaded?
The equal method indicates if two web elements are referring to the same instance of an HTML element in the page.
Whether the content of the HTML elements are different or not has no impact.
So no you can't use it to check the state of an element.
To check the state of an element, you'll have to read the attributes/properties or the text content.
The fact that the element returned is not null indicates that the element exists in the DOM (document object model). Loading of the element would be complete, however there can sometimes be another hidden web element deliberately blocking access to the element until the page has completely loaded or ajax controls are finished processing. For that, you'd need to check its clickable status through a fluent wait command.
So sometimes when i want to click on WebElement i am using elementToBeClickable.
Now when i want to get text etc. i have 2 options (maybe more ???) that i usually use:
presenceOfElementLocated - An expectation for checking that an element is present on the DOM of a page.
visibilityOfElementLocated - An expectation for checking that an element is present on the DOM of a page and visible.
My questions:
Whats the different between the both ?
When i want to get text from element/attribute maybe should i use another ExpectedCondition ?
presenceOfElementLocated would just wait for the presence of an element in the DOM tree.
visibilityOfElementLocated would not only ensure that an element is present, but also check if the element is displayed. The logic behind the visibility determination is described here:
Element Displayedness
Which Expected Condition to use is not that simple as in case of elementToBeClickable and a button needed to be clicked - in this case depends on the actual use case - how the desired element is loaded, is it loaded with the text, or the text is set later and dynamically etc.
There is also textToBePresentInElement which might be more suitable, but it requires you to know a part of the element's text.
And, there is always an option to write a custom Expected Condition - for instance, you can wait for any text to be present in element.
The documentation on code.google.com describes the elementIdElement functionality as "Search for an element on the page, starting from the identified element". Does this mean the search is done for every element following that element throughout the rest of the web page or only for dependents of that element?
If it is the former, then how would I construct the "value" entry if the "using" parameter is "css selector" and I want to find a descendant of the current element's sibling? I thought the value would be "+ div .classname", but this doesn't seem to work.
One way you can do it is by emulating Selenium ByChained, by calling one wait after another:
browser
.useXpath()
.url('http://www.google.com')
.waitForElementVisible('.//body', 1000)
.waitForElementVisible(".//div[contains(#class, 'classVar')]")
.click('button')
The correct xpath string for navigating to an element's parent's following sibling for the existence of another element with a given class is
'(//div[#id="currentElementID"]/../following-sibling::*[1]//div[contains(#class,"classToLookFor")])[1]'
In this example, I know the current element's ID so that's what I use, but the '//div[#id="currentElementID"]' can be replaced with whatever you need to navigate to the starting element. Also, this example assumes the element I'm looking for is a div.