*Updates 22.6.2022 / Identified a recurring issue with OAuth on another site, where globalSetup fails to function properly on the OAuth domain. 21.6.2022 / Analysis from Trace.zip reveals that the OAuth login URL is correct, but the screenshot depicts a blank white page.
My Objective:
I aim to implement cached authentication in my Playwright TypeScript test project. Following the guidelines provided here - .
This approach involves performing the login process once in the global-setup.ts file before each test, and then caching it for subsequent tests.
The Challenge:
The test fails with a timeout error of 30000ms during the page.click action:
When using $env:PWDEBUG=1, there are no issues. However, setting it to 0 triggers the problem.
Summary of Workflow:
Main login page located at domain abc.com
Click on "login by email"
Redirects to a different domain featuring the email login form (where < [placeholder="Email Address"] exists).
Observations: After capturing screenshots and logs, it appears that with DEBUG=0, the desired element is not found on the respective page. In workflow step #1, upon clicking the "login with email" button, the subsequent email login form page does not become visible due to unknown reasons. I attempted incorporating additional timeouts, increased load waiting times, etc., without success. Note: If the post-click login page redirects to a different domain, it might be relevant, although this isn't an issue when DEBUG=1.
Everything functions correctly when solely utilizing beforeEach; however, this contradicts the instructions outlined in the Playwright documentation.
npx playwright test
Running 3 tests using 1 worker
page.click: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "[placeholder="Email Address"]"
============================================================
at ..\global-setup.ts:19
18 | // Click [placeholder="Email Address"]
> 19 | await page.click('[placeholder="Email Address"]');
import { chromium, FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://website.myapp.fi/app/');
// Attempted the operation without waitForNavigation with no variance in output
await Promise.all([
page.waitForNavigation(),
page.locator('div[role="button"]:has-text("email")').click(),
]);
// Click [placeholder="Email Address"]
await page.click('[placeholder="Email Address"]');
await page.locator('[placeholder="Email Address"]').fill('email..');
// Click [placeholder="Password"]
await page.click('[placeholder="Password"]');
await page.locator('[placeholder="Password"]').fill('password..');
// Click button:has-text("Sign in")
await page.click('button:has-text("Sign in")');
// Select company
await page.click('.b-number-cell');
await page.waitForLoadState('networkidle');
// Save signed-in state to 'storageState.json'.
await page.context().storageState({ path: 'storageState.json' });
await browser.close();
}
export default globalSetup;
EDIT: added playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
const config: PlaywrightTestConfig = {
globalSetup: require.resolve('./global-setup'),
testDir: './tests',
timeout: 30 * 1000,
expect: {
timeout: 5000
},
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
actionTimeout: 0,
trace: 'on-first-retry',
// Inform all tests to load signed-in state from 'storageState.json'.
storageState: 'storageState.json'
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
],
};
export default config;