I am having a few issues testing a virtual scroll component with Cypress. I have a test that checks the li elements present in the DOM after scrolling to the bottom of a container.
When written like this the test passes:
cy.get('.virtual-scroll').scrollTo('bottom')
cy.wait(0)
cy.get('li').last().children('h4').contains('1999')
When written like this it doesn't:
cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('li').last().children('h4').contains('1999')
This also fails:
cy.get('.virtual-scroll').scrollTo('bottom').get('li').last().children('h4').contains('1999')
In the second and third examples, get('li') is returning the li elements present before the scroll has completed, and therefore failing the test. I can fix this by adding .wait, but don't fully understand the behaviour and wonder if this is a bug.
Any ideas?
Make an assertion that will always pass when the DOM is rendered, such as using .get() for an element that gets added to the DOM
ex) if you had a <ul class="myloadedlist">.... :
cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('ul.myloadedlist')
cy.get('li').last().children('h4').contains('1999')
That way, Cypress will continue with the test as soon as that element becomes visible.
Why?
I'm assuming the elements get added to the DOM in some sort of scroll eventListener. In that case this is correct behavior.
Essentially what you've tested is the race condition of a user scrolling very quickly to the bottom of the page, to see that the DOM has not yet finished rendering- a valid senario.
Since you targeted the last() li element, Cypress finds the last element of the page before the DOM gets updated, and expects it to contain 1999, which it does not, even after Cypress retries for 4 seconds.
This is actually a great feature of Cypress, because you can test on the state of the DOM at times that the User might only see for a split second.
In my case, adding a duration to the scroll option did the trick.
cy.get("#dialogContent").scrollTo("center", { duration: 500 });
Related
I am having issues get'ing a css selector, its on the dom, and it can even be selected via the UI.
But cypress fails to get it.
There is not async stuff going on, just the page that was loaded.
As you can see in the image thelement is there, any ideas how to get round this?
If you say that the problem is with loading the page, maybe you should pass timeout paramater to the cy.get(), to make sure that Cypress waits long enough.
cy.get('nli-block-container .block-content', {timeout: 20000})
This should wait for 20 seconds for the element. If that doesn't work, please let me know, because it means that the problem lies elsewhere
Surprised I actually haven't come across this, but I have a simple button that is disabled until a dropdown is selected. Sometimes the page isn't fast enough to "enable" the button to be clicked on after the previous dropdown is selected causing it to fail.
I could throw in a "sleep" of a second or two and fix this, but that seems like a lazy/poor way to do this.
Is there a way in capybara (or purely selenium) that I can make it wait until the button is actually enabled? I'd like to throw this is the page model method for this button (as im trying to avoid API specific methods/selenium/etc... in the actual test specs (Although I can if I need to).
FWIW this is specifically for Ruby's capybara framework but pure selenium is fine as well.
Assuming the button you're referring to is actually a button (<button> element, or <input> element with type submit, reset, image, or button) then Capybaras :button selector will (by default) wait for it to be non-disabled.
click_button('Something')
or
find_button('button_id').click
or
find(:button, 'button_value').click
If any of the finder or action methods aren't waiting long enough for a specific element you can always increase the maximum wait time for a specific finder/action by passing a :wait option
find(:button, 'Something', wait: 10).click
If you're not using selector types (if not, why not) and instead are just using raw CSS to locate the element then you can use the :enabled pseudo class along with your existing CSS and something like
find('#my_button:enabled', wait: 10).click
If the element you're calling a button isn't actually a button but some other type of element (<a> etc) styled to look like a button, then you'll need to explain exactly how you're disabling the "button".
In Python you can do something like this:
def wait_until_clickable(driver, xpath, timeout = 1):
while timeout > 0:
try:
element = driver.find_element_by_xpath(xpath)
element.click()
return element
except:
time.sleep(0.1)
timeout = timeout - 0.1
return False
I am writing a UI test that goes to a list of articles and selects the load_more button until this is no longer available (because all articles have loaded). The problem is the button has been hidden at this point rather than removed and is returning this error
Selenium::WebDriver::Error::UnknownError: unknown error: Element <div
class="">...</div> is not clickable at point (x, y). Other element
would receive the click: <div class="" id="" data-module-name="">...
</div>
(Session info: chrome=65.0.3325.181)
(Driver info: chromedriver=2.36.540469
ruby-2.5.1/gems/selenium-webdriver
3.11.0/lib/selenium/webdriver/remote/response.rb:69:in `assert_ok'
I have tried a few loop types but for this, if we assume I'm using
while world.page.has_load_more?
world.page.load_more.click
break if world.page.has_load_more? == false
end
The question is how do I tell Selenium this is ok and not to error, so I can continue with the next step in my test case(cucumber). I realise that the choice of loop type may also be incorrect, so feel free to suggest changes there as well.
Firstly, as Rajagopalan has pointed out, the error that you're getting is not that your element is not visible (as in hidden by CSS) but that it is overlapped by another element. You can call save_and_open_screenshot to see what element is overlapping the button (possibly a fixed footer, etc?). Make sure you've set the window size large enough so you don't have elements unintentionally overlapping and make sure you're running the latest version of Capybara since it attempts to deal with overlapped elements in selenium by scrolling them into view if possible.
Secondly, the loop in your question doesn't make a lot of sense having both the while and break since they check the same thing. Also, assuming the "load more" button is loading and appending to the page via AJAX, you probably need to wait for the new elements to load before checking if the button exists (click does not wait for actions to complete since it has no idea what actions could/would be triggered). That would then become a structure something like
while page.has_button?('Load More')
# Get the current number of visible articles
article_count = page.all('div.article').count # Use whatever selector would match an article in the list
# click the button
page.click_button('Load More')
# ensure more articles have loaded
expect(page).to have_css('div.article', minimum: article_count + 1)
end
Note: You'll probably want to change that to use whatever page object methods you are using (has_load_more?, etc) but the general logic should be correct
I have a scenario where I'd like not check IF an element exists and is visible/clickable. If not, script processing continues.
While Laravel Dusk provides $browser->assertVisible($selector) method, this ends up in an exception if the element is not visible. Or $browser->waitFor('.selector'); but this also ends the script processing if element doesn't appear.
Here is the criteria Selenium uses to check for an element being visible is found here: How to force Selenium WebDriver to click on element which is not currently visible?
Apparently Dusk doesn't provide this kind of method. What would be the best way to implement it?
Better late than never I suppose.
isDisplayed() works pretty well (though not if it's covered up by other elements)...
if($browser->driver->findElement(WebDriverBy::cssSelector('#my-selector'))->isDisplayed()) {
// do something
}
if I have overlays covering my elements, I use ->waitUntilMissing(), or in extreme cases I call on $browser->driver->executeScript() and run some jQuery to temporarily manipulate an element that is "in the way".
You can try to find the element and try to retrieve properties of it. If the properties are empty, the element is not visible. E.g.
$hiddenBtn = $browser->element('#show-more');
if($hiddenBtn && $hiddenBtn->getText()){
$browser->click('#show-more');
}
This worked for me.
Without a good idea of what you're trying to accomplish you can always wait until the element is visible:
https://laravel.com/docs/5.5/dusk#waiting-for-elements
I used several methods of attack attempting to get Casper to see the element in question, which gets loaded via a 2nd GET request that returns a bunch of json to get loaded into the page's DOM.
The thing is this.waitForResource(url,....) works fine executing the success callback after about 2 seconds (I have a timeout of 20 set).
I then tried first this.click('.class-name') inside followed by this.evaluate(function(){document.getElementsByClassName('.class-name')[0].click()});
Click via casperJS returns CasperError: Cannot dispatch mousedown event on nonexistent selector: .class-name while I'm not sure what the DOM action does - my this.on('resource.received',....) call immediately after doesn't capture anything so I assume it also had no effect either. DOM code seems to fail silently in Casper sometimes.
What can be done to select elements and click them to download files only after they are loaded into the DOM via ajax?
Is there a better library than CasperJS for this?
Casper has waitForSelector and waitFor methods that will suit your need.
waitFor will wait until provided function returns true
waitForSelector will wait until provided selector is in DOM, so I guess this is the one you want to use.
Additionaly there is waitUntilVisible which wait until an element is visible on screen