Adapt Shopware Playwright testsuite to own storefront

We want to re-use the Shopware Acceptance framework for actual customer shops.

A while ago Shopware migrated to PlayWright which is great and can be found on GitHub in the main repository and makes use of a NPM package by Shopware, too.

It's easy to run this tests on an existing shop:

Just adapt the .env in the acceptance folder:

APP_URL=https://shopware-latest.example.com/
SHOPWARE_ADMIN_USERNAME=foo
SHOPWARE_ADMIN_PASSWORD=bar

That works. But the tests create a fresh storefront, without content and with the default theme.

Now we want to run those tests on our actual storefront and our custom theme of a test instance we spin up for this purpose.

The sales channel config seems to be contained in DefaultSalesChannel.ts

But I did not figure out how to "disarm" these default fixtures and avoid creating a new sales channel?

PS: We tried a similar approach years ago with Cypress but with PlayWright we already some steps further :-)

I tried a simple test like this:

import { test, expect } from '../BaseTestFile';

test('Storefront cart test scenario', async ({ StorefrontPage, StorefrontCheckoutCart, ValidateAccessibility, ShopCustomer }) => {

    await StorefrontPage.goto('https://www.example.com/');
    await ShopCustomer.attemptsTo(ValidateAccessibility('Homepage', true));
});

That basically works, but I believe that in the background, still a test-saleschannel is created, because when I use

await StorefrontPage.goto(StorefrontCheckoutCart.url());

instead, the test storefront is created and checked.

EDIT: I figured out that the sales channel is created on the fly here:

https://github.com/shopware/acceptance-test-suite/blob/1b9cc9e3e74f84f152cd3ccde48d204c74796c6d/src/fixtures/DefaultSalesChannel.ts#L118

Question is how to inject an own saleschannel properly.

EDIT2: I think I could pull https://github.com/shopware/acceptance-test-suite/blob/6790466b771d999b11a3e351db53eefb58159861/src/types/FixtureTypes.ts#L22 to may own project and remove the DefaultSalesChannelTypes there ...

Solution

This BaseTestFile.ts seems to work and overwrite the URL:

// BaseTestFile.ts
import { test as base } from '@shopware-ag/acceptance-test-suite';
import type { FixtureTypes } from '@shopware-ag/acceptance-test-suite';
import type { SalesChannel, Customer } from '@shopware-ag/acceptance-test-suite';

import '@shopware-ag/acceptance-test-suite';

export const test = base.extend<FixtureTypes>({
    // Overriding the DefaultSalesChannel fixture
    DefaultSalesChannel: [
        async ({ IdProvider, AdminApiContext, SalesChannelBaseConfig }, use) => {
            const customUrl = "https://shopware.example.com"; // Your custom URL here

            const { uuid: domainUuid } = IdProvider.getWorkerDerivedStableId('domain');


            // Provide your custom sales channel object for use in tests
            await use({
                salesChannel: { id: domainUuid, url: customUrl } as SalesChannel,
                customer: {} as Customer, // Define a customer or other properties if needed
                url: customUrl,
            });
        },
        { scope: 'worker' },
    ],
});

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