Clicks on Angular Material are recorded improperly

[marcobuschini]

When I click on an Angular Material button or checkbox (probably something else too) your tool records a click on .cdk-focused instead of on the correct CSS selector. For simple workflows, this is not a problem, but with complex workflows this causes havoc.

[ubergeoff]

Hi there

For me: everything seems to work fine with Angular Material components. When using my data-cy attributes - except for:

<mat-option>

Even though it does have a valid data-cy attribute assigned to it.

cy.get('[data-cy=Enter amount]').click();
cy.get('[data-cy=Enter amount]').type('34342');
cy.get('#mat-select-value-9').click();
cy.get('#mat-option-17 > .mat-option-text').click();

Its finding #mat-option-17 when it should actually be picking out: cy.get('[data-cy=Wednesday, May 20, 201]')

Here is the DOM:

<mat-option _ngcontent-yht-c240="" role="option" class="mat-option mat-focus-indicator sbg-group-select-nx t5 ng-star-inserted mat-selected mat-active" ng-reflect-value="Wednesday, May 20, 2015" data-cy="Wednesday, May 20, 2015" id="mat-option-17" tabindex="0" aria-disabled="false" aria-selected="true"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text"> Wednesday, May 20, 2015 </span><div mat-ripple="" class="mat-ripple mat-option-ripple" ng-reflect-trigger="[object HTMLElement]" ng-reflect-disabled="false"></div></mat-option>

Any idea why that would be the case...?