cypress.io: contains() not waiting for element
We are writing UI tests with cypress, which is usually quite simple to use. But again and again I stumble over a tedious waiting problem.
The scenario is pretty simple. The user clicks on the search button. Then he selects one of the elements with a certain text. Here's the code:
cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The third click event fails, because already cy.contains('Test item 1') doesn't wait for the page and the element to be rendered. From what I can see in the test steps, it simply clicks in the middle of the page, which does essentially nothing. So all subsequent steps fail of course.
However if I add a wait() between the calls like this:
cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The page is rendered correctly, Test item 1 appears, is clicked and all subsequent steps succeed.
According the best practices the wait() call should not be necessary and therefore should be avoided. What am I doing wrong here?
coded-ui-tests cypress
asked Nov 22 '18 at 9:54
AshAsh
6372712
add a comment |
We are writing UI tests with cypress, which is usually quite simple to use. But again and again I stumble over a tedious waiting problem.
The scenario is pretty simple. The user clicks on the search button. Then he selects one of the elements with a certain text. Here's the code:
cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The third click event fails, because already cy.contains('Test item 1') doesn't wait for the page and the element to be rendered. From what I can see in the test steps, it simply clicks in the middle of the page, which does essentially nothing. So all subsequent steps fail of course.
However if I add a wait() between the calls like this:
cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The page is rendered correctly, Test item 1 appears, is clicked and all subsequent steps succeed.
According the best practices the wait() call should not be necessary and therefore should be avoided. What am I doing wrong here?
coded-ui-tests cypress
asked Nov 22 '18 at 9:54
AshAsh
6372712
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace acy.wait()with acy.contains(selector, newContent)where newContent is a piece of text that indicates a fetch has completed.
– Richard Matsen
Nov 22 '18 at 18:09
cy.contains('Test item 1')is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a.should("be.visible")will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.
– Brendan
Nov 22 '18 at 19:33
add a comment |
We are writing UI tests with cypress, which is usually quite simple to use. But again and again I stumble over a tedious waiting problem.
The scenario is pretty simple. The user clicks on the search button. Then he selects one of the elements with a certain text. Here's the code:
cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The third click event fails, because already cy.contains('Test item 1') doesn't wait for the page and the element to be rendered. From what I can see in the test steps, it simply clicks in the middle of the page, which does essentially nothing. So all subsequent steps fail of course.
However if I add a wait() between the calls like this:
cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The page is rendered correctly, Test item 1 appears, is clicked and all subsequent steps succeed.
According the best practices the wait() call should not be necessary and therefore should be avoided. What am I doing wrong here?
coded-ui-tests cypress
asked Nov 22 '18 at 9:54
AshAsh
6372712
We are writing UI tests with cypress, which is usually quite simple to use. But again and again I stumble over a tedious waiting problem.
The scenario is pretty simple. The user clicks on the search button. Then he selects one of the elements with a certain text. Here's the code:
cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The third click event fails, because already cy.contains('Test item 1') doesn't wait for the page and the element to be rendered. From what I can see in the test steps, it simply clicks in the middle of the page, which does essentially nothing. So all subsequent steps fail of course.
However if I add a wait() between the calls like this:
cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The page is rendered correctly, Test item 1 appears, is clicked and all subsequent steps succeed.
According the best practices the wait() call should not be necessary and therefore should be avoided. What am I doing wrong here?
coded-ui-tests cypress
coded-ui-tests cypress
asked Nov 22 '18 at 9:54
AshAsh
6372712
asked Nov 22 '18 at 9:54
AshAsh
6372712
edited Nov 22 '18 at 13:01
Ash
asked Nov 22 '18 at 9:54
AshAsh
6372712
asked Nov 22 '18 at 9:54
AshAsh
6372712
asked Nov 22 '18 at 9:54
AshAsh
6372712
6372712
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace acy.wait()with acy.contains(selector, newContent)where newContent is a piece of text that indicates a fetch has completed.
– Richard Matsen
Nov 22 '18 at 18:09
cy.contains('Test item 1')is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a.should("be.visible")will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.
– Brendan
Nov 22 '18 at 19:33
add a comment |
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace acy.wait()with acy.contains(selector, newContent)where newContent is a piece of text that indicates a fetch has completed.
– Richard Matsen
Nov 22 '18 at 18:09
cy.contains('Test item 1')is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a.should("be.visible")will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.
– Brendan
Nov 22 '18 at 19:33
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace a
cy.wait() with a cy.contains(selector, newContent) where newContent is a piece of text that indicates a fetch has completed.– Richard Matsen
Nov 22 '18 at 18:09
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace a
cy.wait() with a cy.contains(selector, newContent) where newContent is a piece of text that indicates a fetch has completed.– Richard Matsen
Nov 22 '18 at 18:09
cy.contains('Test item 1') is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a .should("be.visible") will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.– Brendan
Nov 22 '18 at 19:33
cy.contains('Test item 1') is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a .should("be.visible") will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.– Brendan
Nov 22 '18 at 19:33
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428220%2fcypress-io-contains-not-waiting-for-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428220%2fcypress-io-contains-not-waiting-for-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It's a bit hard to envision what is going on, can you show the DOM? (or describe the elements and what you know to be happening behind the clicks). Often you can replace a
cy.wait()with acy.contains(selector, newContent)where newContent is a piece of text that indicates a fetch has completed.– Richard Matsen
Nov 22 '18 at 18:09
cy.contains('Test item 1')is finding something, despite it not yet being visible. cypress will throw an exception and fail the test if it can't find the element. Take a look in the command output on the left to see what that call is returning. You may need to change how you're locating that element to make it more specific, or maybe adding a.should("be.visible")will get it working. Posting a screen capture of the command log and your HTML will help us figure it out easier.– Brendan
Nov 22 '18 at 19:33