Cypress: Unable to configure orientation independently of width / height

[stevenalanstark]

• Cypress Version:
  2.1.0

Is this a Feature or Bug?

Feature Request

Current behavior:

We can only configure the orientation with cy.viewport, as the 2nd ( with presets ) or 3rd ( with width / height ) param,

Desired behavior:

We should be able to configure orientation without being required to to pass a new width / height value with cy.viewport

We should be able to configure orientation in the cypress.json file

Additional Info (images, stack traces, etc)

Orientation isn't as simple as reversing the width and height of the target browser, as this would not trigger window.orientation changes or event changes.

When testing webapps, it is important that the orientation change logic is consistent.

I need to be able to have the proper orientation configured in the cypress.json as well as being able to switch on the fly with cy.viewport.

[brian-mann]

It's true you don't have API's to do this - but we don't have a lot of Mobile specific API's, so this is just one of many.

It would be easier for you to have API's, but you can actually already do this now. You only need to do three things:

1. Manually change the cy.viewport()
2. Stub the screen.orientation.type property and control its value. It is a configurable property. If it wasn't you would simply stub an application method which wrapped getting the value of this property - so either way you can do it.
3. Fire the orientationchanged with cy.trigger() manually yourself.

After you do that your application will react properly as if all these things really happened.

[stevenalanstark]

Thank you for the feedback.

I still do feel it's low hanging fruit that is worth accomplishing without the need for a work around.

I have written a command that helps our test writing configuration so that I can do this in a beforeEach

Cypress.Commands.add('toggleOrientation', {
    prevSubject: false
}, () => {
    return cy.window()
        .then((win) => {
            return cy.document()
                .then((doc) => {
                    let w = Math.max(document.documentElement.clientWidth, win.innerWidth || 0);
                    let h = Math.max(document.documentElement.clientHeight, win.innerHeight || 0);
                    let isLandscape = (win.orientation === 90 || win.orientation === -90);

                    return cy.viewport(h, w, !isLandscape);
                });
        });
});

And I will add the trigger in there for the stub and orientation change, thanks for the suggestion

[stevenalanstark]

I am running into an issue trying to stub screen.orientation.type, no matter what I try it's returning the runner's screen and not the application's

cy.stub(screen.orientation, 'type').returns("SOMETHING");
console.log(screen.orientation.type);

This will return landscape-primary ( the runner's value, not the app ) in every case, including trying to prepend win. to the stub, using both cy.window and onBeforeLoad(win) / onAfterLoad(win) options in cy.visit

Do you have any examples for stubbing screen.orientation.type?

[marcjulian]

@stevenalanstark Did you figure out a solution to stub the screen.orientation.type?