How to debug page.beforeEach for login page
Hi - I have this code on my login page. my "/" route is both login page and dashboard page. I dont get any errors but playwright doesnt seem to have logged in
// @ts-check
import { test } from '@playwright/test';
import checkHeader from '../component-tests/checkHeader.mjs';
import checkFooter from '../component-tests/checkFooter.mjs';
import checkTitle from '../component-tests/checkTitle.mjs';
test.use({
ignoreHTTPSErrors: true
});
// test suite for user journey 1
test.describe('User Journey 1', () => {
let page;
test.beforeEach(async ({ browser }) => {
page = await browser.newPage();
// Login
await page.goto('https://localhost:9010/');
await page.getByLabel('Username').fill('example');
await page.getByLabel('Password').fill('example');
// await page.getByTestId('login-submit').click();
await page.click('[data-testid=login-submit]');
await page.waitForLoadState('load');
});
// Dynamic test generation based on routes
const routes = ['/'];
const commonTests = [checkTitle, checkHeader, checkFooter];
for (const route of routes) {
test(`Test common elements on ${route}`, async () => {
await page.goto(`https://localhost:9010${route}`);
for (const testFn of commonTests) {
await testFn(page);
}
});
}
});```This thread is trying to answer question "How to debug page.beforeEach for login page?"
maybe save a storage state, and pass it to the test like: https://playwright.dev/docs/auth#advanced-scenarios
Hi, if you login before each test, why do you create your own page? If you create your own page in a beforeEach you also have to destroy it in an afterEach.
It's better to just leave that to the page fixture. So instead of injecting { browser } into your beforeEach, inject { page } into your beforeEach and your dynamically generated tests. Since beforeEach works at the test level, both beforeEach and test will share the same page.
Once you've done that, and if it still doesn't work, you can record a trace and use trace viewer to see what's going wrong. https://playwright.dev/docs/trace-viewer-intro
@ven0007 OK good to know it's a timing issue. waitForTimeout is something you want to avoid as much as possible though. It will guarantee to slow down your tests considerably, but it doesn't guarantee we are waiting enough.
Isn't there some element or some redirection which can be used as an indication that the login was successful/complete? In most cases you don't have to explicitly wait for things, since Playwright has auto-waiting/actionability checks: https://playwright.dev/docs/actionability
But in case you do need to explicitly wait somewhere, there are several more intelligent ways to wait for conditions in Playwright. Things like https://playwright.dev/docs/api/class-page#page-wait-for-url https://playwright.dev/docs/api/class-page#page-wait-for-response https://playwright.dev/docs/api/class-locator#locator-wait-for https://playwright.dev/docs/test-assertions#auto-retrying-assertions
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.