admin管理员组文章数量:1323558
I would like to expand on this question as I have a similar question:
I want to cy.get('#lead_name').type('foo')
but it is covered by this element with opacity 0.9 while the form is loading:
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>
When I start with the assertion
cy.get('#lead_name').should('be.visible)
it passes the assertion (maybe because of the opacity?) but when I then try to type in the field, I get the error message that the element is covered.
When I try to assert that the overlay is not there anymore and add
cy.get('.blockUI blockOverlay').should('not.exist')
Cypress also passes the assertion even though the element does exist and covers the other element and cy.get('#lead_name').type('foo')
fails.
Is there any way to address this problem like
//This does not work it's just a sample to explain what I want to do
//test if the element I want to get is not covered
cy.get('#lead_name').should('not.be.covered')
//or test if the element is actionable
cy.get('#lead_name').should('be.actionable')
to make sure it waits until the form has loaded?
{edit} This is the error message I get from Cypress:
Timed out retrying after 4000ms: cy.type() failed because this element:
<input name="CrmLead[first_name]" id="CrmLead_first_name" type="text" maxlength="255">
is being covered by another element:
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>
{edit 2} This is the code I use, condensed to the relevant parts:
it('should select new lead', () {
cy.visit(Cypress.env('lead_url'))
cy.get('#new_lead).click() //this opens the new form which takes some time to load
cy.get('#lead_name').type('foo')
cy.get('#lead_last_name').type('bar')
cy.get('.button').click()
}
{edit 3} The more I test possible solutions, the more I bee convinced that the problem is not the overlay, but something in the Cypress code itself.
When I open the form manually it never takes more than a second for the loading spinner to disappear, usually just 0.1-0.2 seconds.
Yet when Cypress opens the form the form just doesn't load properly as the loading spinner stays there indefinitely.
I would like to expand on this question as I have a similar question:
I want to cy.get('#lead_name').type('foo')
but it is covered by this element with opacity 0.9 while the form is loading:
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>
When I start with the assertion
cy.get('#lead_name').should('be.visible)
it passes the assertion (maybe because of the opacity?) but when I then try to type in the field, I get the error message that the element is covered.
When I try to assert that the overlay is not there anymore and add
cy.get('.blockUI blockOverlay').should('not.exist')
Cypress also passes the assertion even though the element does exist and covers the other element and cy.get('#lead_name').type('foo')
fails.
Is there any way to address this problem like
//This does not work it's just a sample to explain what I want to do
//test if the element I want to get is not covered
cy.get('#lead_name').should('not.be.covered')
//or test if the element is actionable
cy.get('#lead_name').should('be.actionable')
to make sure it waits until the form has loaded?
{edit} This is the error message I get from Cypress:
Timed out retrying after 4000ms: cy.type() failed because this element:
<input name="CrmLead[first_name]" id="CrmLead_first_name" type="text" maxlength="255">
is being covered by another element:
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 665px; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.9; cursor: wait; position: absolute;"></div>
{edit 2} This is the code I use, condensed to the relevant parts:
it('should select new lead', () {
cy.visit(Cypress.env('lead_url'))
cy.get('#new_lead).click() //this opens the new form which takes some time to load
cy.get('#lead_name').type('foo')
cy.get('#lead_last_name').type('bar')
cy.get('.button').click()
}
{edit 3} The more I test possible solutions, the more I bee convinced that the problem is not the overlay, but something in the Cypress code itself.
When I open the form manually it never takes more than a second for the loading spinner to disappear, usually just 0.1-0.2 seconds.
Yet when Cypress opens the form the form just doesn't load properly as the loading spinner stays there indefinitely.
Share Improve this question edited Oct 15, 2021 at 10:01 cypher_null asked Oct 15, 2021 at 7:10 cypher_nullcypher_null 6601 gold badge14 silver badges24 bronze badges 5- Could you provide a full example code that can reproduce your issue? – Joshua Commented Oct 15, 2021 at 8:24
- The plete code is pretty long and uses POM, but I added the relevant part of the code to my OP – cypher_null Commented Oct 15, 2021 at 8:28
- Unfortunately I can not give you a link to the app itself as it is private :( – cypher_null Commented Oct 15, 2021 at 8:36
-
I think you can change the state of the element with
.invoke('show')
. Here is a short video explaining how you can do this. testautomationu.applitools./advanced-cypress-tutorial/… – ItsNotAndy Commented Oct 15, 2021 at 9:31 -
Thanks. Tried this and while the mand
cy.get('#lead_portlet').invoke('show')
triggers as intended, it does not change the fact that it's being covered by the Overlay :( – cypher_null Commented Oct 15, 2021 at 9:54
2 Answers
Reset to default 6The checking of the overlay should be done in two steps.
cy.get('.blockUI.blockOverlay')
.should('exist')
.then($overlay => $overlay.remove())
cy.get('.blockUI.blockOverlay').should('not.exist')
cy.get('#lead_name', {timeout: 10000})
.should(($el) => { // should will cause retry
return Cypress.dom.isFocusable($el) // instead of visible, more relevent to actionability
})
It's possible if you just do the second step, Cypress passes that mand before the overlay is present.
It's the same principle as checjing a loading spinner, which has be tackled on SO before.
BTW you are selecting an element with two classed (according to the error message), so you need two .
in the selector.
Perhaps that's the only change you need!
I added another check above that might help. Cypress.dom.isFocusable
.
From the docs Is focusable
Cypress internally uses this method everywhere to figure out whether an element is hidden, mostly for actionability.
If you get really stuck, take a look at Gleb Bahmutov's walkthrough video here Debug the Element Visibility Problems in Cypress
One more idea - you can try removing the covering overlay in the test - added a line to the sample above.
You can use {force: true}
with type()
. This will igonre the overlapping of other element.
cy.get('#lead_name').type('foo', {force: true})
Or if you want to assert that the element has opacity 0.9
you can use:
cy.get('.blockUI blockOverlay')
.should('have.attr', 'style')
.and('include', 'opacity: 0.9')
Or, you can wait for the element to not have the opacity, in that case you can use:
cy.get('.blockUI blockOverlay', {timeout: 7000})
.should('have.attr', 'style')
.and('not.include', 'opacity: 0.9')
本文标签: javascriptCypress assertionelement is actionablenot coveredStack Overflow
版权声明:本文标题:javascript - Cypress assertion - element is actionablenot covered - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742120234a2421660.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论