Successive viewport() in different tests are "overwritten" by the last one

[laurentpayot]

• Operating System: Ubuntu 17.04
• Cypress Version: 0.20.0
• Browser Version: Chrome 62, Chromium 60, Electron 53

Is this a Feature or Bug?

Bug

Current behavior:

Successive cy.viewport() in different tests are "overwritten" by the last one

Desired behavior:

Setting viewport should work for a test, regardless of another viewport in another test.

How to reproduce:

Write several tests, each one with a different viewport setting.

Test code:

In the following coffeescript file, all tests are run with the wiewport set as 'iphone-5', 'landscape', i.e. the last one set.

# layout.coffee
describe "Layout tests", ->

	presets = ['macbook-15', 'macbook-11', 'ipad-2', 'iphone-6+', 'iphone-5']

	for preset in presets
		for orientation in ['portrait', 'landscape']
			it "Sign In button should work for #{preset} (#{orientation})", ->
				cy.viewport(preset, orientation)
				cy.visit('/')
				cy.get('body.with-layout-side-opened').should('not.exist')
				cy.get('#menuButton').click()
				cy.get("body.with-layout-side-opened")
				cy.get("#signInModal").should('not.be.visible')
				cy.get("#signInButton").click()
				cy.get("#signInModal").should('be.visible')

I also tried cy.visit('/') before cy.viewport(preset, orientation), same issue.

Additional Info (images, stack traces, etc)

[brian-mann]

I don't think this is an issue with Cypress, this is an issue with your loop.

Based on the way JavaScript works, it waits until the last moment to evaluate variables, it will only ever see the final loop iteration.

You need a closure here so that each function closes over the local scope of that variable.

If you wrote your loop (above) in plain JavaScript the result would also be the same.

# layout.coffee
describe "Layout tests", ->

	presets = ['macbook-15', 'macbook-11', 'ipad-2', 'iphone-6+', 'iphone-5']

	for preset in presets
		for orientation in ['portrait', 'landscape']
                   ## add IFFE here to create the closure
                    do (preset, orientation) ->
			it "Sign In button should work for #{preset} (#{orientation})", ->
				cy.viewport(preset, orientation)
				cy.visit('/')
				cy.get('body.with-layout-side-opened').should('not.exist')
				cy.get('#menuButton').click()
				cy.get("body.with-layout-side-opened")
				cy.get("#signInModal").should('not.be.visible')
				cy.get("#signInButton").click()
				cy.get("#signInModal").should('be.visible')

[laurentpayot]

D'oh! I didn't realize I was generating functions in a loop. Amazing answer, thanks @brian-mann 👍