Cypress: Button not visible when checking a checkbox through Cypress

user_16424251 0
Viewed 622

I am developing a web application using Angular. There is a table that has checkboxes for each line.

When I check one of the checkboxes, action buttons such as "View" or "Delete" show up at the bottom on the screen. However, when I check it by Cypress with the following command, the buttons don't show up.

cy.get('[ng-reflect-message="16"]').parent().find('input[type="checkbox"]').check({force: true})

How should I do to show up the buttons on the screen using Cypress?

Thanks.

angular cypress
2 Answers

Thanks for the answer. The checkbox is normal one(input type="checkbox"）. 1st one got an error below.

Timed out retrying after 4000ms: cy.trigger() failed because this element is not visible:

<input type="checkbox">

This element <input> is not visible because it has an effective width and height of: 0 x 0 pixels.

Fix this problem, or use {force: true} to disable error checking.Learn more

Then, I added {force: true} to trigger part as below and ran it. No errors occurred this time but the buttons still did not show up.

      cy.get('[ng-reflect-message="16"]')
        .parent()
        .find('input[type="checkbox"]')
        .check({force: true})
        .trigger('change', {force: true})

I executed 2nd one as well. No errors occurred and the buttons did not show up.

Are there anything else I can try?

user_164242510

With Angular you often have to trigger a change event along with the check, so perhaps

cy.get('[ng-reflect-message="16"]')
  .parent()
  .find('input[type="checkbox"]')
  .check({force: true})
  .trigger('change')

If it's a mat-checkbox a click will do the trick

cy.get('[ng-reflect-message="16"]')
  .parent()
  .find('input[type="checkbox"]')
  .click({force: true})
user_17817720
Related