tau-advanced-playwright
tau-advanced-playwright copied to clipboard
[QUESTION] How to organize fixtures better?
🐞 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! :)