How to run each test several times ?

[arichard-info]

Hello !

We're writing our tests mobile-first with cypress-cucumber-preprocessor. By default, all the tests are run with a mobile viewport. But on some specific cases, we want to run them on desktop viewport.

This is possible since this PR : #216.
We're just using the Before to adapt the viewport depending on tags :

Before({ tags: '@desktop' }, () => {
  cy.viewport(desktopWidth, desktopHeight);
});

This is doing the job, but now we would like to enable the tests on both desktop and mobile viewports. Some tests are not mobile or desktop only, we want to run them on both viewports. So we will have three cases of tests :

• Mobile only => the test is not tagged
• Desktop only => the test is tagged with @desktop
• Mobile AND Desktop => the test is tagged with @all-viewport

We could implement this duplicating the tests by ourself (writing the wanted tests two times, with a different tag on each), but we're looking for a better way (and easier to maintain).

Do someone know if it's possible to implement this with the plugin ? Or natively with Cypress ?
@jcundill any idea ? 😏

[jcundill]

From the cucumber tags doco this should be achievable with or https://cucumber.io/docs/cucumber/api/#tags @desktop or @all-viewport

Is this not working in the plugin? I can take a look if it isn't

[arichard-info]

The tag expressions are working well in the plugin, but this is not doing what we want. With oror and we're running the scenario only once.

If I call ("@desktop and @mobile"), on the Before hook, I won't be able to run the matched scenarios on each viewport.

We're looking for a way to do something like this :

Before({tags: 'not @desktop and not @all-viewport'}, () => {
  cy.viewport(mobileWidth, mobileHeight);
})

Before({tags: '@desktop'}, () => {
  cy.viewport(desktopWidth, desktopHeight);
})

Before({tags: '@all-viewport'}, () => {
  cy.viewport(mobileWidth, mobileHeight);
  // run scenario
  cy.viewport(desktopWidth, desktopHeight);
  // run scenario
})

A solution could be to create npm commands to run only mobile / desktop / both-viewport scenarios, but we already have a lot of commands for Cypress, and we will always run all viewports tests (never only the mobile or only desktop for example).

[badeball]

This seems easily achievable outside of Cypress / Cucumber / this preprocessor.

#!/usr/bin/env sh

CYPRESS_TAGS="not @desktop-only" CYPRESS_VIEWPORT="mobile" cypress run
CYPRESS_TAGS="not @mobile-only" CYPRESS_VIEWPORT="desktop" cypress run

... while somewhere in your code

Before(() => {
  cy.viewport(...cy.env("VIEWPORT").split(","));
})

Edit: Removed some unnecessary lines in the bash-example.

[arichard-info]

Thanks for your answer @badeball :)

I tried this and it works well 😉

By default, the same .feature file is resolved 2 times, so it wastes time on the global tests run, especially since we have a lot of scenarios. So if we use it, we'll have to combine it with bundled features files to gain time of execution.

Just one problem with this solution: it prevents us from using normally the cypress open command. All the .feature files are displayed, but the viewport is not updating between tests.
The mobile-only and desktop-only viewport are correctly set, but for the both-viewport tests, the test is running on mobile only 😕
This functionality is important in our case, so I think we'll have to keep duplicating the tests for mobile / desktop for now 😕

[badeball]

You're right, this doesn't play well with the runner. Had one not been using Cucumber, one could simply have generated tests dynamically, as shown below. However, this simply isn't possible with how Cucumber works today.

That's not to say that a plugin couldn't provide this, but personally I would not be comfortable in expanding the scope beyond what Cucumber itself is.

function runIn(viewports, testFn) {
  for (let viewport in viewports) {
    describe(`When running in ${viewport}`, () => {
      beforeEach(() => {
        cy.viewport(...viewport.split("x"));
      });
      testFn();
    });
  }
}

describe("...", () => {
  runIn(["1920×1080", "1440×1080"], () => {
    it("...", () => {
      // ...
    });
  });
});

[avelaine]

If you only have few scenarios that you want to try in different viewports, then you can create a Scenario Outline with a table of your different viewports. It will run your scenario with as many arguments as you got. 🙂
Hope it can help !

Example:

Scenario Outline: Display a button on <size>
    Given I am on the <size> viewport
    Then a button should be displayed

    Examples:
      | size       |
      | mobile   |
      | desktop |

[badeball]

Due to personal reasons, the previous maintainers of this package are stepping down and handing the reigns over to me, a long-time contributor to the project and a user of it myself. This is a responsibility I'm very excited about. Furthermore, I'd like to thank @lgandecki ++ for all the work that they've done so far.

Read more about the transfer of ownership here.

The repository has however moved and all outstanding issues are being closed. This is not a reflection of the perceived importance of your reported issue. However, if after upgrading to the new version, you still find there to be an issue, feel free to open up another ticket or comment below. Please make sure to read CONTRIBUTING.md before doing so.