Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] How to organize fixtures better? #8

Open
mareru opened this issue Sep 4, 2024 · 0 comments
Open

[QUESTION] How to organize fixtures better? #8

mareru opened this issue Sep 4, 2024 · 0 comments
Assignees
Labels
help wanted Extra attention is needed pending question Further information is requested

Comments

@mareru
Copy link

mareru commented Sep 4, 2024

🐞 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! :)

@mareru mareru added help wanted Extra attention is needed pending question Further information is requested labels Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed pending question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants