raptatinha / tau-advanced-playwright

Course Advanced Playwright by Renata Andrade for Test Automation University
https://testautomationu.applitools.com/
MIT License
67 stars 192 forks source link

[QUESTION] How to organize fixtures better? #8

Open mareru opened 2 months ago

mareru commented 2 months ago

🐞 Describe the question: I have a question related to fixtures and Playwright. My app has 2 flavors, EU and US shop and the customers can be guest or logged in (authenticated) - it is a ecommerce shop. So I created fixtures in this manner: authenticated.ts

import { test as base } from '@playwright/test';
export type Fixtures = {
  loginCheckoutPage: LoginCheckoutPage;
  categoryPage: CategoryPage;
  cartPage: CartPage;
  shipmentCheckout: ShipmentCheckout;
  homePage: HomePage;
  header: Header;
  isGuest: boolean;
  ...
};

export const authenticatedTest = base.extend<Fixtures>({
  isGuest: false,

  testData: async ({}, use) => {
    const testData = await getTestData();
    await use(testData);
  },

  loginCheckoutPage: async ({ page, testData }, use) => {
    const loginCheckoutPage = new LoginCheckoutPage(page, testData);
    await use(loginCheckoutPage);
  },
  categoryPage: async ({ page }, use) => {
    const categoryPage = new CategoryPage(page);
    await use(categoryPage);
  },
  cartPage: async ({ page, context, isGuest, testData, loginPage }, use) => {
    const cartPage = new CartPage(page, context, loginPage, testData, isGuest);
    await use(cartPage);
  },
  loginPage: async ({ page, testData }, use) => {
    const loginPage = new LoginPage(page, testData);
    await use(loginPage);
  },
  ...

Then I have guestBase.ts

import { authenticatedTest } from './authenticated';

export const guestBaseTest = authenticatedTest.extend<{
  setCookies: void;
}>({
  storageState: { cookies: [], origins: [] },
  isGuest: true,
  setCookies: [
    async ({}, use) => {
      // To be overridden in specific guest tests
      await use();
    },
    { auto: true, scope: 'test' },
  ],
});

guestEU.ts

import { guestBaseTest } from './guestBase';
import { setCookies } from '../utils/pageUtils';
import CookieCountryCode from '../constants/cookieCountryCode';

export const guestTestEU = guestBaseTest.extend({
  setCookies: async ({ page, context }, use) => {
    await setCookies(context, page, CookieCountryCode.BE);
    await use();
  },
});

guestUS.ts

import { guestBaseTest } from './guestBase';
import { setCookies } from '../utils/pageUtils';
import CookieCountryCode from '../constants/cookieCountryCode';

export const guestTestUS = guestBaseTest.extend({
  setCookies: async ({ page, context }, use) => {
    await setCookies(context, page, CookieCountryCode.US);
    await use();
  },
});

I did it like that, in a way of extending the fixtures, but I would like to get your feedback on it and maybe suggestion in how to do it better? I have a feeling that I am doing something wrong here, but not sure what exactly, cannot pin point it. Thanks! :)