With ion-router-outlet it would seem you get multiple instances of your page classes decorated with various combinations of css classes bound to them, e.g.: .ion-page, .ion-page-hidden, .can-go-back, etc.
I’m currently using Ionic 5.1.1 / Angular 9.1.9 and I’m using the Cypress front-end testing framework at 5.4.0. The trouble is I’m in need of a CSS selector prefix that ensures that I find elements that (from my point of view) are singular on the page, but in occur in multiples in the DOM because of these “hidden” ion-router-outlet children that are outside the scope of what I care about testing and sometimes Cypress finds these instead which is super annoying.
The selector I most recently though was good enough to find .my-selector of interest, was: :not(ion-app).ion-page:not(.ion-page-hidden) .my-selector, but then I came accross a failing test case where I looked at the DOM at failure-time and it looked like this:
Where you can see there are two children with .ion-page, and one has .can-go-back. In this case, I’m pretty sure the one I wanted to select was the parent .can-go-back but I don’t think the element I want always has that class.
Please can someone help me identify a CSS selector that consistently / always selects the item currently in the foreground? Can I always count on the foreground .ion-page to appear last in the DOM? Without such a selector writing non-flaky automated tests is an absolute nightmare.
1 post - 1 participant