cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.08k stars 3.19k forks source link

Interacting with action-sheet causes viewport to reset to default #14841

Closed elio-maggini closed 3 years ago

elio-maggini commented 3 years ago

Current behavior

When testing an Ionic5/Angular11 web app in browser interacting with the action-sheet which pops up after activating ion-select causes viewport to change from mobile (set to iPhone6) back to default desktop browser viewport.

Desired behavior

The viewport should remain as set.

Test code to reproduce

Code fragment for HTML

<ion-row>
       <ion-col>
        <div class="padding-bottom-4"><ion-label>From</ion-label></div>
          <ion-item class="ion-select" lines="none">
            <ion-select interface="action-sheet"
                   data-cy="transfer-from-select"
                    (ionChange)="accountSelected(from)"
                    [(ngModel)]="selectedTransferFromAcct"
                     #fromAcct placeholder='- Select Account -'>
                      <ion-select-option *ngFor="let transferFromAccount of transferFromAccounts"
                                                       [value]="transferFromAccount">{{transferFromAccount.accountName}} {{transferFromAccount.accountNumber}} {{transferFromAccount.availableBalance | currency: 'USD'}}</ion-select-option>
                           </ion-select>
             </ion-item>
      </ion-col>
 </ion-row>
it('should correctly change to and from accounts', () => {
        cy.get('[data-cy=transfer-from-select')
            .click();

        cy.get('.action-sheet-container > :nth-child(1) > :nth-child(1)')
            .click();
    });

The click on data-cy=transfer-from-select causes view port to reset.

Versions

Cypress: 6.3.0 Browser: Chrome Version 88.0.4324.96 (Official Build) (x86_64) Mac OS: Catalina

jennifer-shehane commented 3 years ago

We'll need a fully reproducible example to recreate the issue. Right now, running the code above fails to find the .action-sheet-container > :nth-child(1) > :nth-child(1) element. Can you provide any necessary HTML, JS, and CSS to recreate the issue? Thanks.

jennifer-shehane commented 3 years ago

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will consider reopening the issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.