`contains()` targets element with `pointer-events: none` and fails to click instead of targeting element higher up the tree

Is this a Feature or Bug?

~Bug.~ A feature, I guess. Thought it was a bug, but it turns out contains does something else than what I originally assumed.

Current behavior:

I use UI components from Ant Design (React) and the button has the following mark-up:

<button type="button" class="ant-btn">
  <span>Some Label</span>
</button>

and the following style applied:

.ant-btn > span {
  pointer-events: none;
}

When I try to interact with the button using:

cy.get('button').contains('Some Label').click()

I get the following error message:

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

<span>Create</span>

is being covered by another element:

<button type="button" class="ant-btn">…</button>

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

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

When I programmatically set pointer-events to auto, the issue disappears. Apparently the contains operator finds the <span> containing the text and then fails, because it has pointer-events: none.

Desired behavior:

The contains() should ideally react to the expected interaction request by selecting elements without pointer-events: none when possible. In this case, it should select the button and the click should be triggered on it.

Steps to reproduce:

https://github.com/hon2a/cypress-test-tiny/tree/hon2a/pointer-events-bug

Versions

Cypress: 3.0.1 OS: macOS 10.13.5 browser: Chrome 66.0

[jennifer-shehane]

Closing as resolved. This now prints an error correctly indicating that the element has pointer-events: none.

If you’re experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.

[jennifer-shehane]

This is actually not how .contains() was designed to work. It was specifically designed to prefer elements like button over span as documented here.

Can you try specifying a selector in .contains() like in the code below? This should definitely prefer the button. Let me know what the result is of this.

cy.contains('button', 'Some Label').click()