Cypress not finding data-test element - cypress

Morning/evening everyone. Have a weird issue that, according to the best practices, should just work.
I have the following element on a page which I need to click:
<a data-test="sign-out-link" href="/redirect/onejl/sign-out"><span>Sign out</span></a>
I'm doing this in my test:
cy.get('[data-test="sign-out-link"]') .should('be.visible') .click()
But cypress times out saying the element cannot be found...
This gives the same behaviour:
cy.get('a[data-test="sign-out-link"]') .should('be.visible') .click()
Even this just fails, which is kinda weird (it should find that text fairly easily):
cy.contains('Sign out').click()
Anything obvious I'm doing wrong?

Have you tried to find out this element in selector playground. check here.
One obvious error I see is on your hyperlink. Try with below
cy.get('a[data-test=sign-out-link]').should('be.visible').click()

Can you please add a small cy.wait() before cypress Sign out test code and see if that is working for you.
cy.wait(2000);
cy.get('[href="/redirect/onejl/sign-out"] > span').contains("Sign out").click();
cy.wait(2000);
cy.get('a > span').contains("Sign out").click();
cy.wait(2000);
cy.get('[data-test ="sign-out-link"]').should('be.visible').click();

Related

failed because this element is disabled

I have an error in cypress that I get sometimes but other times the tests pass.
I have tried everything but I need it to always work
You should dig deeper to understand why your test is flaky. You haven't specified where you are running this test so it could be your app issue or your resources being tied if you are running in CI.
Either way, it is always good to add assertions before invoking an action on the HTML element. This will ease out the debugging any failures/flakiness. Plus, these assertions will be relatively quick if your app is ready.
// sometimes it is good to check a checkbox is disabled before you enable it
cy.get(x.foward_button1)
.should('be.visible')
.and('be.disabled')
cy.get(x.checkboxes)
// good assertion for any element
.should('be.visible')
// good for any button, checkbox, radio, etc
.and('be.enabled')
.click({multiple:true})
cy.get(x.foward_button1)
.should('be.visible')
.and('be.enabled')
Is button changing state from disabled to enabled by some conditions for exmaple validation or data request?
if yes before clicking button tell cypress to wait for these conditions to end. You can do it ugly way by telling cypress to wait for example 5secounds.
https://docs.cypress.io/api/commands/wait
cy.intercept('GET', '/exampleGet').as('someFetch')
cy.wait(5000) or cy.wait('#someFetch')
You have to add force: true to click the disabled button:
cy.get('x.forward_button1').click({force: true})

Inconsistent element query with Cypress

I'm trying to use Cypress to click a react-select element. However, I get very inconsistent results.
My code for clicking the element is as follows:
cy.get('div[class*=container]').contains('Brand').click()
Sometimes this works, sometimes it doesn't. Sometimes if I repeat this line twice (which is kind of hacky...), it works, but on other occasions it doesn't...
What would be the correct and fool-proof way to wait for this element to properly load and click it only then in Cypress?
I looked into this cypress repo and it suggested two way to do the click().
cy.contains('.product', 'First item')
.find('button.order')
.click()
.wait(1000)
cy.contains('.product', 'First item')
.find('button.order')
.click()
.click()
Because its a select element, what you would want to do is:
cy.get('div[class*=container]').select('Brand')
or
cy.get('div[class*=container]').contains('Brand').realClick()
Looking at examples of react-select, there are a lot of classes with container in them, so 'div[class*=container]' is not the best selector.
I understand class*=container is to circumvent the style hash which can change on compile.
Ideally, add a specific class to the source, as per the first example on the home page
<Select
className="basic-single"
...
then you have a link to the top-most element, which is clickable.
cy.visit('https://react-select.com/home')
cy.get('div.basic-single')
.should('contain', 'Ocean')
.click()
cy.contains('Green').click() // option selection
cy.get('div.select__control').eq(0)
.should('contain', 'Green')

Capybara - Click element by class name

For what seems to be a simple question I've been on this for a stupidly long time and can't seem to find anything on Google. I have this button I need to click which has no id but a class is included
<button class="filter-case-studies" onclick="initBootpag(filterForContentType('CASE STUDIES', searchHits))" type="button">
<b>CASE STUDIES</b>
(2)
</button>
I've tried using click_on which I now know is only for links and buttons so of course won't work. This is what I have so far:
When(/^I filter the results to only see case studies$/) do
click_on('filter-case-studies')
end
I've also tried page.find('filter-case-studies').click, this too doesn't work.
page.find(:class, 'filter-case-studies').click defualts to :css so this also failed for me.
Is there no way to click an element by the class name in Capybara?
Thanks in advance for the help.
The standard way of doing this in Capybara is
find('button.filter-case-studies').click
In relatively recent versions of Capybara you should also be able to do
click_on(class: 'filter-case-studies')
find('.filter-case-studies').click as recommended here https://robots.thoughtbot.com/write-reliable-asynchronous-integration-tests-with-capybara#find-the-first-matching-element
I had a button that could not be found (Unable to find visible link or button nil with classes [close-modal]) using the methods above.
This worked for me: page.execute_script('$.find(".close-modal")[0].click()')
click_on('.filter-case-studies')
You need the . selector for classes, and # for ids.
Thanks to Mr Schutte for the idea to use . selectors.
I had to use page.find(:class, '.filter-case-studies').click in the end. The absolute navbar got in the way of the button so I then had to include page.execute_script "window.scrollBy(0,500)" to complete the test.

Keeping a rich:modalPanel open on validation fail?

I'm trying to keep my modal from closing when validation, done with an actionLister, fails.
I've seen numerous discussions on this issue with several purposed solutions but have had no luck with any of them. Anyone have any working solutions?
I'm using RichFaces 3.3.3.Final.
Have you tried this?
oncomplete="if (#{!validation.failed}) Richfaces.hideModalPanel('accounts_popup1');"
I love StackOverflow because I always find the solution immediately after posting a question.
The first solution in http://community.jboss.org/wiki/ModalPanelValidation works for me.
Paraphrased, put an id on your h:messages element and then do this Javascript check to see if you can close the modal.
function modalClose() {
if (!document.getElementById('fullresolvedidofmessagepanel')) {
Richfaces.hideModalPanel('modalpanelid');
}
}
The strings here are stand ins.
Yup - in the oncomplete(..) function of your button verify whether the facesContext contains any errors. If not - hide(), otherwise do nothing.

firebug fails to report error like "if(maxi - 1 = i)..."

I missed a "=",
should be:
if(maxi - 1 == i)...
but firebug didn't report anything.
And it took quite a while for me to found it.
Is it a bug of firebug?
It works perfectly for me. I am using Firebug v1.4.2.
Additional add-ons: Google Page Speed, YSlow, Firecookies
My code:
<script type="text/javascript">
var max = 5;
if(max - 1 = 4){
alert(true);
}
</script>
Screenshot:
screenshot http://img12.imageshack.us/img12/451/21986504.th.jpg
I have a "Invalid assignment left-hand side" error for the example you've provided.
EDIT:
As described by Asker - the error was in a JS file. I've done an include like this. Same thing, the error was also tracked.
screenshot http://img17.imageshack.us/img17/8462/31594029.th.jpg
Conclusion
I think its that, when you load the page, Firebug is not activated. When you activate after page has loaded, the error was not captured. Thus you see no error. If you keep Firebug activated and open the page, you might just see the error logged.
Hope this helps!
Firebug is not necessarily the be-all-end-all of code problems. It is only a tool to help you find bugs. It's impossible to write a tool to find every single bug in a program (if only...).
To be fair, nothing in your toolbox found it -- why place the blame only on Firebug? You missed it, your text editor missed it, and your unit tests missed it, at least.
For example, if I type that expression in my editor, it's underlined in orange, and the status bar says:
Test for equality (==) mistyped as assignment (=)? (parenthesize to suppress warning)
Why wait until your code gets to your web browser to see if it worked? There are many steps before that which are great for verification and testing. The sooner you identify problems, the easier they are to fix.

Resources