Question 253312 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to assert if a pop up is visible in cypress?

I am trying to learn cypress and am using the example.cypress.io site.
I want to check that when the ‘click to toggle popover’ button is clicked, cypress can see this.

So far i’ve tried:

it('clicks', () => { cy.get('.action-btn').click().should('have.value', true)

and

it('clicks', () => { cy.get('.action-btn').click next.should('This popover shows up on click').should('exist')// Assert that the pop-up exist

I’ve also tried to use the selector popover966184 to assert if it exists but nothing seems to work.

I’m very new to cypress, can someone help me?

Tags:

2

Answers


  1. 0

    The first part, you doing right, which is cy.get('.action-btn').click(), you need then to check if the popup with the id equal to popover966184 exist.

    it('clicks', () => {
  cy.get('.action-btn').click()

  cy.get('#popover966184').should('exist')
});
    Login or Signup to reply.
  2. 0

    If you right-click and inspect in dev-tools before clicking, you will see the button HTML

    <button type="button" 
  class="btn btn-lg btn-danger action-btn" 
  data-toggle="popover" 
  title="" 
  data-placement="top" 
  data-content="This popover shows up on click" 
  data-original-title="Popover"
>Click to toggle popover</button>

    If you click the button with dev-tools still open, you can see an attribute added

    <button type="button" 
  class="btn btn-lg btn-danger action-btn" 
  data-toggle="popover" 
  title="" 
  data-placement="top" 
  data-content="This popover shows up on click" 
  data-original-title="Popover" 
  aria-describedby="popover757166"                <-- new attribute added
>Click to toggle popover</button>

    So, you could test that with

    cy.get('[data-content="This popover shows up on click"]').click()

cy.get('[data-content="This popover shows up on click"]')
  .should('have.attr', 'aria-describedby', 'popover757166')

    but the number part of the value would seem to change per test run.

    Instead, you could specify only what is invariant every time you run the test,

    • the aria-describedby attribute is added
    • it’s value starts with popover
    cy.get('[data-content="This popover shows up on click"]').click()

cy.get('[data-content="This popover shows up on click"]')
  .should('have.attr', 'aria-describedby')
  .and(attribute => expect(attribute.startsWith('popover')).to.eq(true))

    Asserting the popup is visible

    That’s slightly different, there is an addtional element added below the button (see it in devtools).

    <div class="popover fade top in" role="tooltip" 
  id="popover634251" 
  style="top: 21px; left: 31.4219px; display: block;">
    <div class="arrow" style="left: 50%;"></div>
    <h3 class="popover-title">Popover</h3>
    <div class="popover-content">This popover shows up on click</div>
</div>

    cy.get('[data-content="This popover shows up on click"]').click()

cy.get('[data-content="This popover shows up on click"]')
  .invoke('attr', 'aria-describedby')
  .then(ariaDescribedbyAttribute => {

    // check the attribute format
    expect(ariaDescribedbyAttribute.startsWith('popover')).to.eq(true)

    // check the corresponding element is added
    cy.get(`[id="${ariaDescribedbyAttribute}"]`) 
  })

     

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search