DEV Community

A better global setup in Playwright reusing login with project dependencies

Debbie O'Brien on March 15, 2023

Global setup is being used by many teams and companies to login to an application and then use this setup for tests that need to be in an authentic...

Read full post

Renato O. Nunes • Mar 20 '23

Hey @debs_obrien,

I tried to create a new project, using a site conduit to test here. But, for me it doesn't work.

Idk why, but the storage file is not created before the test, and when I run the command npx playwright test --headed --project=chromium the test fail.

I tried to follow the official documentation but got the same results. =(

Can you help me with this "feature"? I'm having a problem with some tests and I'm trying to find an alternative to login.

Renato O. Nunes • Mar 20 '23

PS: If I put on the storage path into the test, the storage file is created.

e.g: await page.context().storageState({ path: './auth/user.json' });

Debbie O'Brien • Mar 20 '23

do you have a playwright-reuse-auth folder? change it to playwright and see if that works. if not can you add this a post in our discord server as much easier to get more eyes on it there for better help: aka.ms/playwright/discord

Victor Neves • Apr 22 '23

Hi @debs_obrien
We are starting implementing e2e tests on our project using Playwright and we have used this approach as it's also suggested on the documentation.
We only have one QA that doesn't have so much experience with Playwright (he has mostly worked with cypress and other existing projects that contain e2e tests are also done with cypress)
So after implementing the first basic suite of tests he got blocked because he wasn't able to make the group of test that checks if the user is able to access protected routes pass.
So I decided to do some tests in order to try to understand what could be the problem and I was able to make them pass but I'm not sure if what I did is correct.
Looking to Playwright's documentation fr me it's not totally clear the order where we should add the await page.context().storageState({ path: STORAGE_STATE }); and if when executing test that are defined on a external file that requires to access the data that saved on the JSON we always need to call it not.
Probably it's not too clear what I'm saying, so I'll gonna add some of the code to see if what I did, is correct or not

setup('authenticate', async ({ page }) => {
    await page.goto(urls.login);
    await page.locator(uiIdsCookies[envConfig.brand].cookieLayerAcceptBtn).click();
    // wait for cookie layer to disappear
    await page.waitForTimeout(customTimeout);

    await page.locator(uiIds[brand].loginButton).click();
    // wait for login form to appear
    await page.waitForTimeout(customTimeout);

    await page.locator(uiIds[brand].inputEmail).type(envConfig.username);
    await page.locator(uiIds[brand].inputPassword).type(envConfig.password);

    await page.locator(uiIds[brand].sendFormButton).click();
    // reads cookies from json file to be used to test pages that require authentication
    await page.context().storageState({ path: STORAGE_STATE });
    // the browser is closed

    // new browser is open
    await page.waitForURL(envConfig.devUrl); <-- this is a protected route that requires to be authenticated to access it
    await page.context().storageState({ path: STORAGE_STATE });
});

My question is about the last storageState
Do we need to call it on every test that is executed on a new window that requires the user to be authenticated? If yes, it's not to clear for me why is called after and not before accessing the page. Is it because after the page is open, then it will make the browser read the cookies and so from the file? I would expect that we would define from where it would read the info, from he browser as it's the default behaviour or from the JSON

Hopefully with code I was able to be clear to my question.
Thanks in advance

AnewTranduil • Nov 21 '23

There are line in the dependent project config which set the json. You don't need to call await page.context().storageState({ path: STORAGE_STATE }); again.

projects: [
    {
      name: 'setup',
      testMatch: '**/*.setup.ts',
    },
    {
      name: 'e2e tests logged in',
      dependencies: ['setup'],
      use: {
        storageState: STORAGE_STATE,
        ^^^^^^^^^^^^^^^^^^^^^^^
      },
    },
  ],

Saurav Likhar • Jun 30 '23

Hey @debs_obrien ,
I have 2 case scenarios.
First case - I have 2 type of users whose session data I want to use for different tests. Suppose I have 2 test suites A.spec.ts and B.spec.ts. First test file will use the login credentials of user1 and second test file will use the login credentials of user2. How can I store the 2 users login data using this new setup file?
In earlier version of globalSetup.ts file, I used to open two different contexts of browser and then two different pages to login the two types of users and then save the data of respective login in different state.json files.

Second case - In particular test file, I want to use the logged in data for some tests and not for all the tests. How can I do that in new version of project configurations? Earlier I used to write const context = await browser.newContext({storageState: undefined}); inside the tests in which I do not want the logged in state data.

Debbie O'Brien • Jul 3 '23

hi, can you post this to the Q&A on our discord server. would be much easier to answer/track and get others to look at it too. thanks

Phil • Sep 26 '23

I've found that making use of storage state in combination with playwright fixtures to be much more useful than coupling storage state with global setup. I've documented my experience with it in case anyone is interested.

Anastasiia Kolianovska • Jan 5

Sounds interesting, could you please share your experience in more detail?

Phil • Jan 5

Sure I posted here about it.

raducybersec • Jun 29 '23

Hey @debs_obrien ,
I am wondering if I can use playwright test code with azure AD MFA. I have tried using TOTP instead and otpauth to generate the code for authentication but I failed dramatically with {"ResultValue": "AuthenticationThrottled", "Message": "Authentication is throttled throttle.sas.user.authmethod.extended for tenant: 5ec97021-b760-441e-a67c-c2479291ad5d, user: b1ae5226-6cc6-4f88-a1dd-abea51a4dda4, auth method: PhoneAppOTP. Authentication limit reached: [Duration:01:00:36][Identifier:<PII-REDACTED>][Level:100][Reason:RequestCount].", "AuthMethodId": "PhoneAppOTP", "ErrCode": 500121,}
is there any way to save my authentication?
Thank you

Debbie O'Brien • Jun 29 '23

hi, i havent used Azure AD personally. If you post this question in our discord server someone should be able to help you out

Alice Huynh • Apr 30

Hey @debs_obrien
I wonder if I have two projects as dependencies then would they run at the same time or would they run in the order that they are listed?

jackbob2020110 • Nov 3 '23

Hey @debs_obrien

I followed the your github sample code (github.com/debs-obrien/playwright-...) to create M365 OWA test. the strange thing here is that when i tried to run 'npx playwright test' for all test, except login ok, other test will trigger to locate elelement timeout. but when I run each them one by one, it works without any issue. i'm curious what i was missing.

Test timeout of 30000ms exceeded.
Error: locator.click: Target closed
=========================== logs ===========================

waiting for getByPlaceholder('Search')

12 |
13 | await page.waitForLoadState();

14 | await page.getByPlaceholder('Search').click();
| ^
15 |

16 | await page.waitForTimeout(2000);
17 |

at C:\Users\vagrant\code\learn-playwright\tests\page-searchmail.spec.ts:14:41

here is what run page-searchmail.spec.ts only, it works with out any issue.

thanks.
_Jun

Anand Tiwari • Mar 31 '23

Hi @debs_obrien, I'm having a problem where we want the results of the tests to be posted to our management system, and since we are sharding our tests, we are running the setup tests on each m/c, resulting in multiple test sets ids. Is there any way we can create a test set once and pass it on to all tests running on different m/c?

Comment deleted

Debbie O'Brien • Mar 16 '23

Can you file an issue with your operating system and version number etc. here is link to my repo with it working incase it helps: github.com/debs-obrien/playwright-...

Aromal Mg • Nov 23 • Edited

Hi @debs_obrien

I have implemented login once using project dependency as mentioned in above post.

I have defined the session storage in project config as in the above document.
But before each test execution using session storage, I can see a browser getting opened and closed.

Below is the actual behaviour:

Dependent setup project runs and saves session storage.
A empty browser is getting opened and closed.
Test are executed in the new browser with login state using saved session storage.

Why is the 2nd step happening. I am not able to figure the issue by debugging.
Is it expected or can anyone help me if you have experienced similar issue before.

Maxi Bandito • Mar 16 '23 • Edited

"This page is not available for Python."
Would be a good approach to release the same feature for all available language, all at once...

Debbie O'Brien • Mar 17 '23

Project dependencies only work in Node.js. You will have to submit a feature request for Python. I am not sure if this can work with Pythons test runner etc so I can't answer on when, how, if etc but please fill a request on GitHub so the team can look into it

Maxi Bandito • Mar 17 '23

Thank you Debbie, anyways, similar solution is possible with combination of
@pytest.fixture
and
yield

hameethaahamed • Apr 7

Hi , how to do the same in javascript, my global authentication keeps failing