Run each scenario in separate browser tab

[iam-amanxz]

Hi,

When I try to run multiple test scenarios they are all running in same browser tab which resulting in breaking my steps.

I mean they are trying to continue from last step. While this is a good option it doesn't work well in my case.

Let's say I am trying to test 2 different scenarios

1. Login with correct username and password
2. Login with incorrect username and password

When trying to run the tests first it logins with correct username and password. In this case it cannot test the second scenario since it is already logged in.

Is there a way to run each scenario in separate tabs? Please help!

[alexej-strelzow]

Hi, not from the top of my head.

What you could try:

a. explicitly log out at the end of the scenario (or maybe even globally -> hooks.ts -> After) b. clear whatever keeps you logged in e.g. local storage

Try to run this in your GIVEN to clear the local storage before you navigate to the login mask: export const clearLocalStorage = (t: TestController): Promise<void> => ClientFunction(() => localStorage.clear()).with({ boundTestRun: t })();

[iam-amanxz]

Hi, I thought of that but there are too many test cases like that which runs independent of each other.

And I can't seem to figure out the order in which the test cases run so that I can prepare the test cases accordingly. Even if I do that it is hard for me to test individual features since I am relying on other scenarios.

I have used similar implementation frameworks that uses testcafe and cucumber js before and they all open a new tab for each scenario by default. Assuming you are explicitly setting it to open in the same window somewhere?

[alexej-strelzow]

Hi, so test cases should never depend on each other, otherwise you will get into maintenance hell. That being said, the order of execution should not matter.

Did you try clearing the local storage? Maybe you have to delete cookies as well. As each scenario should be based on a clean state that should not harm you, right?

Maybe you can point me to these similar implementations? I am not forcing TestCafe to run the tests in the same tab. Afaik that is also the default behaviour (see https://testcafe-discuss.devexpress.com/t/testcafe-runner-is-it-possible-to-perform-testing-in-several-browser-windows/103/8).

If really nothing works for you then you can try this -> https://testcafe.io/documentation/402841/guides/advanced-guides/multiple-browser-windows#open-a-new-window

[iam-amanxz]

Hi,

I am sorry about my bad explanation. Actually what I meant to say was, after each scenario runs the browser will restart and the next scenario will run in a new browser window with a clean state. Basically each scenario runs independently without needing to worry about logout.

This is the one I am currently using in my project and it works fine for most of my needs. https://github.com/rquellh/testcafe-cucumber

Here are some other I've come across that follow the same pattern https://github.com/masmovil/cucumber-testcafe https://github.com/anthanh/cucumber-testcafe-example

I want to migrate to your version since

1. Typescript
2. Reporting is awesome
3. Logging etc.. 😎😎

It would be really helpful if you could help me achieve this behavior since I am aiming to propose my team the migration to your version from the current one we are using.

[alexej-strelzow]

Ok, now I understand.

In this case, what you can do is to adapt hook.ts (see [2]). In my framework I create a TestCafe instance only once. In [1] a TestCafe instance get created for every scenario. So you would have to move the logic from BeforeAll (see [2] L99) into a Before (see [3]) hook. I would try to move that part:

  testControllerHolder.register(testControllerConfig);
  SelectorFactoryInitializer.init();

  if (!existsSync(TEST_FILE)) {
    createTestFile(TEST_FILE);
  }

  if (isLiveModeOn()) {
    createLiveServerAndRunTests();
  } else {
    createServerAndRunTests();
  }

The reason for my approach was performance + if you delete browser storage and cookies you can achieve a clean state. So I will not change this, BUT maybe in future provide a switch (don't know the side-effects of that change yet).

Hope that helps you to get going.

[1] https://github.com/rquellh/testcafe-cucumber [2] https://github.com/alexej-strelzow/testcafe-cucumber-typescript/blob/master/src/support/hooks.ts [3] https://github.com/cucumber/cucumber-js/blob/master/docs/support_files/hooks.md

[iam-amanxz]

Hi,

Had to bring

SelectorFactoryInitializer.destroy();
testControllerHolder.destroy();

if (existsSync(TEST_FILE)) {
    unlinkSync(TEST_FILE);
}

inside After hook as well. Now it works exactly how I wanted. Really appreciate your help ❤

[alexej-strelzow]

Awesome, would you be so kind to create a PR? So if sb wants the framework to behave in this way he/her has it ready. Also, maybe I will provide a switch - so it will be useful for me in future as well.

Thank you @iam-amanxz for the digging and making it possible! I will close this issue then. And if you have further improvement suggestions, please let me know!

Enjoy the framework :)

BR Alexej

[iam-amanxz]

Sure Alexj. I will make sure to create a PR. Thanks for the big help 👍