Cypress: Element is not visible, even though it should be

[jokklan]

Bug when trying to click a div element

Hi :) First of all thanks for a awesome service, really enjoy using and testing with cypress :+1:
However I have a issue with a test I'm writing, and I'm hoping maybe you can help me :)

Current behavior:

I have a calendar rendered in react, and try to click on one of the days (a div element rendered using flex-box layout). When running the cy.get('.rbc-today').click() command do I get the following error:

CypressError: Timed out retrying: cy.click() failed because this element is not visible:

<div class="rbc-day-bg rbc-today background-wrapper">...</div>

This element '<div.rbc-day-bg.rbc-today.background-wrapper>' 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.

https://on.cypress.io/element-cannot-be-interacted-with

I have tried using click({ force: true}), and this does not raise a error, however the element is not clicked and the following commands fails because the click trigger a modal.

I have also tried adding cy.get('.rbc-today').should('be.visible') before the click command, without any luck. Only cy.wait(1000) works, but I would prefer not to use that.

My spec looks like this:

describe('Schedule planner', () => {
  before(() => {
    cy.loginAdmin()
  })

  it('allows the creation of shifts', () => {
    cy.visit('/schedules/1/edit')

    cy.get('.rbc-today').should('be.visible')

    cy.get('.rbc-today').click()

    cy.get('input[name="translations[en][name]"]')
      .type('A new shift')

    cy.get('input[name="attendanceLimit"]')
      .type(5)

    cy.get('input[name="startTime[time]"]')
      .type('10:00')

    cy.get('input[name="endTime[time]"]')
      .type('18:00')

    cy.get('button[type="submit"]').click()

    // TODO: assert some stuff
  })
})

Desired behavior:

The div element is visible in the snapshot, and has both width and height set if I inspect it, so cypress should not return this error, especially because cy.get('.rbc-today').should('be.visible') passes.

[jennifer-shehane]

The fact that you say force: true does not work is pretty strange. Is the element you are clicking on listening for an onclick event?

[jokklan]

Yes, the element is a react component using the onClick react property.

[lurajon]

@jennifer-shehane

Thank you for this awesome tool! I am a noob in Cypress at the moment, so this might be something I am doing wrong.

I have the same problem as @jokklan, but on a textarea. I have even added {force: true} to the cy.get('#org-description').type('some random text', {force:true});

This did however not make any difference to the test.

It has passed a few times, but have failed consistently lately. (same version of Cypress)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.0.1                                                                              │
  │ Browser:    Electron 59 (headless)                                                             │
  │ Specs:      5 found (base/base_map_create_edit_spec.js, base/base_map_spec.js, base/orgAdmin_… │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

CypressError: Timed out retrying: cy.type() failed because this element is not visible:

<textarea name="org-description" id="org-description" class="form-control " required="required"></textarea>

This element '<textarea#org-description.form-control.>' 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.

https://on.cypress.io/element-cannot-be-interacted-with

The screenshots clearly shows the textarea, so I find this strange. This only happens in headless mode.

Best regards

Jone

[jennifer-shehane]

Closing as duplicate of https://github.com/cypress-io/cypress/issues/695

[MinhajSyed]

I was getting the same error saying "CypressError: Timed out retrying: cy.click() failed because this element is not visible:". But luckily after using the "click({force:true})" it worked for me. Below is the code, thanks.

Suggestion: Not sure if we can use "Window Maximize" type of thing to make the elements visible.

My Code which worked

it ('Enter data in the required fields', () => {
        cy.get('input[placeholder="Enter a name to save"]').type('NEWS Cypress Test Item')
        //cy.get('#Headline').should('be.enabled')
        cy.get('#Headline').click({ force: true})

[nevermore11184]

Make sure, that you test it on the correct port. For instance, in my case it was Docker that kept an old DOM representation on :3000 port and my tests were running also on this port.
It was solved by changing port on cypress.json - "baseUrl": "http://localhost:3001".