I coded a simple playwright test where I have a storage state login n searchFix.ts.

I want to have my test code running the login follow by searchFix.ts n the rest of my code.

searchFix.ts

import {test as base, expect} from "@playwright/test";
import {SearchPage} from "../pages/SearchPage";
import {acctRow} from '../interface/acctRow';
import {randomizeInt} from '../utils/randomizeInt';
import {csvReader} from '../utils/csvReader';


export {expect} from "@playwright/test";

export type SearchFixtures = {
    searchFix: SearchPage;
}

export type accOpt = {
    accNum: string;
}

export const test = base.extend({
    searchFix: async ({page}, use) => {
        const searchPage: SearchPage = new SearchPage(page);
        const myCsvReader: csvReader = new csvReader('./data/acc.csv');
        let accInfo: acctRow[] = myCsvReader.readFile();

        await searchPage.search(accInfo[0].acc);
        await use(searchPage);

    },
    page: async ({ page }, use) => {
        const errors: Array = [];

        page.on("pageerror", (error) => {
            errors.push(error);
        });

        await use(page);

        expect(errors).toHaveLength(0);
    },

})

searchPage.ts

import {Locator, Page, expect} from "@playwright/test";

export class SearchPage {
    readonly page: Page;
    searchDropdown: Locator;
    searchInput: Locator;
    searchBtn: Locator;
    
    constructor(page: Page) {
        this.page = page;
        this.searchDropdown = this.page.locator('').contentFrame().locator('#textField');
        this.searchInput = this.page.locator('frame[name="cmnSrch"]').contentFrame().locator('#textField');
        this.searchBtn = this.page.locator('frame[name="cmnSrch"]').contentFrame().getByRole('button', {name: 'Search'})
    }

    public async search(qry: string) {
        await this.searchInput.fill(qry);
        await this.searchBtn.click();
    }

    public async searchDealer(qry: string) {
        //await this.
        await this.searchInput.click();
        await this.searchInput.fill(qry);
        await this.searchBtn.click();
    }
}

Client.spec.ts

import {Page, expect} from '@playwright/test'
import {test} from "../../fixtures/SearchFix"

test('Add Holdings', {tag: '@e2e'}, async ({page, searchFix}) => {
    await page.goto(process.env.HOMEPAGE!);
    await page.waitForLoadState('domcontentloaded');

    // Insert searchFix steps here
    // search client here


    // then click client tab



});

Questions:

1. How to ensure the storage state login is triggered first n follow by searchFix.

2. How to use Playwright Fixture Options?

Please help. Thanks in advance.