Rayrun
← Back to Discord Forum

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?"

9 replies
daniel_boone1990
daniel_boone1990

maybe save a storage state, and pass it to the test like: https://playwright.dev/docs/auth#advanced-scenarios

this didnt work. 😦

refactoreric

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

@refactoreric the trace viewer helped. I had to add a await page.waitForTimeout(5000); after login click to load all the state variables (permissions)

thank you

@refactoreric @daniel_boone1990 thank you for your help

refactoreric

@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

@refactoreric let me try those options.

thank you

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.