As seen here, It shows green arrow, but test has failed.I need to click on the test to see result:
Without clicking on test, it seems as if test has passed:
I want the test to be shown in red color or red arrow mark
You can use cy.should. Now when assert fail, test will fail
cy.should(() => {
expect(result).to.equal(true)
});
Related
I’m adding a couple of animations to an app that has Percy taking snapshots in the cypress tests.
I’m trying to figure out a way to wait for the animations to finish before taking the snapshot.
I’m aware that cypress already does that by default according to the docs. But it seems that it only waits until the element is safe for an ACTION, but not regular assertions.
Let’s use my logo animation for example. It slides from the left to center. The flaky tests capture the snapshot anywhere in its path.
Now, just for a test, I asked cypress to click the logo and then Percy works alright, the snapshot is only taken at the end of the animation.
For this case it’s ok, since my logo does not have an action related to it. But what if clicking it had a redirect, for example?
How can I tell cypress to wait without using an action?
Can you assert the slide has finished before the snapshot?
It would involve a element.getBoundingClientRect() and manually checking the position.
it('waits for logo to slide to center',
{viewportWidth: 1000}, // ensure fixed, appropriate viewport for the test
() => {
cy.get('#myLogo')
.should($logo => { // using should will retry until animation finishes
const left = $logo[0].getBoundingClientRect().left
expect(left).to.eq(450)
})
// snapshot now
}
)
I'm doing this with a drag and drop scenario, but finding the numbers have rounding errors.
I've added chai-almost to sort it out.
const chaiAlmost = require('chai-almost')
chai.use(chaiAlmost(1)) // allowed amount of variance in equality is 1
...
expect(left).to.almost.eq(450)
Simplest way is to add a hard cy.wait(animation-time-in-ms) before the snapshot.
It won't make the difference to the test runtime since you need the animation to finish before the test can complete.
I have a pop up window containing a script in its head. And this script should be triggered by click on the window button. But after click on this button the script does not run. Could you suggest the reason?
Steps to reproduce:
Click on a button in the main window.
Child window containing a simple form is open.
Move to the child window, fill in the form fields and click on submit button.
Expected result: The click triggers a script located in the child window head. The script process the form and submit it.
Actual result: an error arises: "submitMyForm is not defined" (reference: submitMyForm() is a method containing in the script mentioned above).
So the problem is that the child window form fields can be populated and form button can be clicked but the script bounded to the button by means of the link <a href="javascript:submitMyForm();"> does not work as the function submitMyForm() is not found. Obviously the reason of the test failure is stubbing the child window which is performed to prevent having 2 windows at the same time. After this the child window is opening in the same browser tab as Cypress is not able to work with 2 windows open in the same time. But in this case the script stops working neither from the test nor by performing the click manually.
Here is a code snippet from the Cypress test:
const pop_url = `/dir1/dir2/file.php?id=${sectionId}`; // Here is a new window URL
cy.window().then( win => {
const stub = cy.stub(win, 'open').as('windowopen');
newSurveySectionListObj.AddNewBtnClick(); // Triggers form opening in the new window
cy.get('#windowopen').should('be.called.with', pop_url);
cy.window().then( $win => {
$win.location.href = pop_url
newSurveySectionListObj.typeDropdownSelect('Matrix'); // works fine
newSurveySectionListObj.modalDescriptionFldType('Cypress test string'); // works fine
newSurveySectionListObj.responseTypeDropdownSelect('Checkbox'); // works fine
cy.get('a[href="javascript:submitMyForm();"]').click(); // Does not work despite the button is clicked. An error "submitMyForm is // not defined" arises
});
});
You are going beyond what Cypress is capable of/designed for.
I would question why you are using a separate window in your app? You will run afoul of pop-up blockers that will prevent the new window being opened anyway. A percentage of users won't be able to work it out.
There are 2 approaches to this:
Use a modal dialog to achieve this (not great on mobile)
Use another route/page to display your form, return to the prev page when done
These have the advantage that they won't break with pop-up blockers, and your Cypress tests will work, as they are still in the same window.
I have just installed the mocha-sidebar extension in vs code. I am using the following config in my settings.json file:
{
"mocha.files.glob": "test/**/*.spec.js",
"mocha.requires": [],
"mocha.env": {
"NODE_ENV": "test"
},
"mocha.sideBarOptions": {
"lens": true,
"decoration": true,
"autoUpdateTime": 1000,
"showDebugTestStatus": true
}
}
If I click the green play button in the extension window it runs the tests correctly and shows the results in the sidebar. If I now update the test to make it fail the previously green circle next to the test changes to yellow, but nothing else happens.
I would expect the test to be shown with a red circle (failing), I would also expect the test in the test file to have a red dot next to the failing test, but this remains green.
I have to run the tests by pressing the green play button again from the sidebar.
The other thing I have noticed is that when a test fails, it reports the failure in the test file e.g. //expected a to equal a. But when the test is updated to pass the comment does not get removed and I have to switch files and then return to the test file which then seems to remove the comment.
Thanks in advance!
I'm writing test in Cypress to test if icon in 'a:before' pseudo element is correct.
The 'a:before' icon code is \f115, but Cypress sees it as .
As a result my assert fails with
AssertionError: expected '""' to equal '"\f115"'.
Why does Cypress see \f115 as ?
When a build in Xcode finishes, it fails, or it succeeds. Normally this is shown in two places: a squarish gray popup near the center bottom of the Xcode main window, and the words "build failed" or "build succeeded" in the small text box in the center of the toolbar along the top.
But the squarish popup goes away after a few seconds, and the toolbar text is a few seconds later overwritten with "Indexing | Loading index..." If i wandered away for more coffee and come back ten minutes after the build is done, I can't tell in an easy glance if the build succeeded or not.
How to determine if it succeeded, quick and easy, without having to bother with looking in bin/debug/?
Or just as good, is there a way to make the squarish popup or the toolbar text stick around forever instead of disappearing?
Not sure this is what you want, but if you click on the Report Navigator (the eighth tab on the top left of the screen), you see the most recent builds, and there are marks next to each one showing if any errors were found when running.