From c2a05fbe0b68604d2ed3f9438425476ac7395f0a Mon Sep 17 00:00:00 2001 From: "a.okko" <14863712+ravenokko@users.noreply.github.com> Date: Thu, 29 Jan 2026 14:20:37 +0100 Subject: [PATCH 1/4] docs: update local-development testing on theme compilation requirements and the actor pattern for readability --- .../testing/playwright/actor-pattern.md | 46 +++++++++---------- .../testing/playwright/local-development.md | 4 ++ 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/guides/plugins/plugins/testing/playwright/actor-pattern.md b/guides/plugins/plugins/testing/playwright/actor-pattern.md index 66d09ed0e..fd9634f82 100644 --- a/guides/plugins/plugins/testing/playwright/actor-pattern.md +++ b/guides/plugins/plugins/testing/playwright/actor-pattern.md @@ -50,7 +50,7 @@ test("Product detail test scenario", async ({ await ShopCustomer.goesTo(StorefrontProductDetail.url(product)); await ShopCustomer.attemptsTo(AddProductToCart(product)); await ShopCustomer.expects( - StorefrontProductDetail.offCanvasSummaryTotalPrice + StorefrontProductDetail.offCanvasSummaryTotalPrice, ).toHaveText("€99.99*"); }); ``` @@ -79,7 +79,7 @@ Be aware that the Playwright `click` method automatically includes a number of [ Tasks are small chunks of reusable test logic that can be passed to the `attemptsTo` method of an actor. They are created via Playwright fixtures and have access to the same dependencies. Every executed task will automatically be wrapped in a test step of Playwright, so you get nicely structured reports of your tests. -**Example** +**Basic Example** ```typescript import { test as base } from "@playwright/test"; @@ -95,7 +95,7 @@ export const Login = base.extend<{ Login: Task }, FixtureTypes>({ StorefrontAccountLogin, StorefrontAccount, }, - use + use, ) => { const task = (customCustomer?: Customer) => { return async function Login() { @@ -107,16 +107,16 @@ export const Login = base.extend<{ Login: Task }, FixtureTypes>({ await ShopCustomer.fillsIn( StorefrontAccountLogin.emailInput, - customer.email + customer.email, ); await ShopCustomer.fillsIn( StorefrontAccountLogin.passwordInput, - customer.password + customer.password, ); await ShopCustomer.presses(StorefrontAccountLogin.loginButton); await ShopCustomer.expects( - StorefrontAccount.personalDataCardTitle + StorefrontAccount.personalDataCardTitle, ).toBeVisible(); }; }; @@ -136,7 +136,17 @@ test("Customer login test scenario", async ({ ShopCustomer, Login }) => { }); ``` -**Example** +To keep tests easily readable, use names for your tasks so that in the test itself, the code line resembles the `Actor.attemptsTo(doSomething)` pattern as closely as possible. + +```typescript +// Bad example +await ShopCustomer.attemptsTo(ProductCart); + +// Better example +await ShopCustomer.attemptsTo(PutProductIntoCart); +``` + +**Page Object Model Example** ```typescript import type { Page, Locator } from "playwright-core"; @@ -172,7 +182,7 @@ export const SelectPaymentMethod = base.extend< >({ SelectPaymentMethod: async ( { ShopCustomer, StorefrontCheckoutConfirm }, - use + use, ) => { const task = (paymentOptionName: string) => { return async function SelectPaymentMethod() { @@ -184,7 +194,7 @@ export const SelectPaymentMethod = base.extend< await ShopCustomer.selectsRadioButton( paymentMethods, - paymentOptionName + paymentOptionName, ); await ShopCustomer.expects(paymentOptionRadioButton).toBeChecked(); }; @@ -195,7 +205,9 @@ export const SelectPaymentMethod = base.extend< }); ``` -This fixture is the "SelectPaymentMethod" task, which selects the desired payment method radio button using keyboard navigation (automatically includes `a11y_checks` assertions). +This fixture is the "SelectPaymentMethod" task, which selects the desired radio button in the `paymentMethodRadioGroup` defined in the page object using keyboard navigation (automatically includes `a11y_checks` assertions). + +To use "SelectPaymentMethod" in a test, you simply pass the name of the desired payment option. Here is a sample scenario for a successful checkout that shows how you can combine multiple tasks to build your test scenarios. ```typescript import { test } from "./../BaseTestFile"; @@ -220,18 +232,4 @@ test("Customer successfully orders product", async ({ }); ``` -To use "SelectPaymentMethod" in a test, you simply pass the name of the desired payment option. Here is a sample scenario for a successful checkout that shows how you can combine multiple tasks to build your test scenarios. - You can create your tasks in the same way to make them available for the actor pattern. Every task is just a simple Playwright fixture containing a function call with the corresponding test logic. Make sure to merge your task fixtures with other fixtures you created in your base test file. You can use the `mergeTests` method of Playwright to combine several fixtures into one test extension. Use `/src/tasks/shop-customer-tasks.ts` or `/src/tasks/shop-admin-tasks.ts` for that. - -To keep tests easily readable, use names for your tasks so that in the test itself, the code line resembles the `Actor.attemptsTo(doSomething)` pattern as closely as possible. - -**Example** - -```typescript -// Bad example -await ShopCustomer.attemptsTo(ProductCart); - -// Better example -await ShopCustomer.attemptsTo(PutProductIntoCart); -``` diff --git a/guides/plugins/plugins/testing/playwright/local-development.md b/guides/plugins/plugins/testing/playwright/local-development.md index 9d9343e07..907125aa7 100644 --- a/guides/plugins/plugins/testing/playwright/local-development.md +++ b/guides/plugins/plugins/testing/playwright/local-development.md @@ -41,3 +41,7 @@ npx playwright test --ui This will launch the Playwright Test Runner UI, where you can select and run specific tests. By following these steps, you can work locally with the ATS and test your changes in your Shopware instance. + +:::info +When running your tests, the Acceptance Test Suite operates under the assumption that any themes are compiled beforehand and the "Shopware default theme" is being used for Storefront. Custom themes may require some adjustments for certain locators to properly work. +::: From 2a63109e91d63a59208086df9e376f5edee36387 Mon Sep 17 00:00:00 2001 From: ravenokko <14863712+ravenokko@users.noreply.github.com> Date: Thu, 29 Jan 2026 14:28:55 +0100 Subject: [PATCH 2/4] style: remove unnecessary commas --- .../plugins/testing/playwright/actor-pattern.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/guides/plugins/plugins/testing/playwright/actor-pattern.md b/guides/plugins/plugins/testing/playwright/actor-pattern.md index fd9634f82..ffe02072c 100644 --- a/guides/plugins/plugins/testing/playwright/actor-pattern.md +++ b/guides/plugins/plugins/testing/playwright/actor-pattern.md @@ -50,7 +50,7 @@ test("Product detail test scenario", async ({ await ShopCustomer.goesTo(StorefrontProductDetail.url(product)); await ShopCustomer.attemptsTo(AddProductToCart(product)); await ShopCustomer.expects( - StorefrontProductDetail.offCanvasSummaryTotalPrice, + StorefrontProductDetail.offCanvasSummaryTotalPrice ).toHaveText("€99.99*"); }); ``` @@ -95,7 +95,7 @@ export const Login = base.extend<{ Login: Task }, FixtureTypes>({ StorefrontAccountLogin, StorefrontAccount, }, - use, + use ) => { const task = (customCustomer?: Customer) => { return async function Login() { @@ -107,16 +107,16 @@ export const Login = base.extend<{ Login: Task }, FixtureTypes>({ await ShopCustomer.fillsIn( StorefrontAccountLogin.emailInput, - customer.email, + customer.email ); await ShopCustomer.fillsIn( StorefrontAccountLogin.passwordInput, - customer.password, + customer.password ); await ShopCustomer.presses(StorefrontAccountLogin.loginButton); await ShopCustomer.expects( - StorefrontAccount.personalDataCardTitle, + StorefrontAccount.personalDataCardTitle ).toBeVisible(); }; }; @@ -182,7 +182,7 @@ export const SelectPaymentMethod = base.extend< >({ SelectPaymentMethod: async ( { ShopCustomer, StorefrontCheckoutConfirm }, - use, + use ) => { const task = (paymentOptionName: string) => { return async function SelectPaymentMethod() { @@ -194,7 +194,7 @@ export const SelectPaymentMethod = base.extend< await ShopCustomer.selectsRadioButton( paymentMethods, - paymentOptionName, + paymentOptionName ); await ShopCustomer.expects(paymentOptionRadioButton).toBeChecked(); }; From 91f40cbb4686122db8a1ea63eb78ff3459ca015e Mon Sep 17 00:00:00 2001 From: Micha Hobert Date: Fri, 30 Jan 2026 08:36:27 +0100 Subject: [PATCH 3/4] Update guides/plugins/plugins/testing/playwright/local-development.md --- guides/plugins/plugins/testing/playwright/local-development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/plugins/plugins/testing/playwright/local-development.md b/guides/plugins/plugins/testing/playwright/local-development.md index 907125aa7..9c3f1fcc1 100644 --- a/guides/plugins/plugins/testing/playwright/local-development.md +++ b/guides/plugins/plugins/testing/playwright/local-development.md @@ -43,5 +43,5 @@ This will launch the Playwright Test Runner UI, where you can select and run spe By following these steps, you can work locally with the ATS and test your changes in your Shopware instance. :::info -When running your tests, the Acceptance Test Suite operates under the assumption that any themes are compiled beforehand and the "Shopware default theme" is being used for Storefront. Custom themes may require some adjustments for certain locators to properly work. +When running your tests, the Acceptance Test Suite operates under the assumption that any themes are compiled beforehand and the "Shopware default theme" is being used for Storefront. Custom themes may require some adjustments for certain locators to work properly. ::: From 16ba915c2d4ba36811cd13f57706b1c9845d5872 Mon Sep 17 00:00:00 2001 From: Micha Hobert Date: Fri, 30 Jan 2026 08:36:35 +0100 Subject: [PATCH 4/4] Update guides/plugins/plugins/testing/playwright/actor-pattern.md --- guides/plugins/plugins/testing/playwright/actor-pattern.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/plugins/plugins/testing/playwright/actor-pattern.md b/guides/plugins/plugins/testing/playwright/actor-pattern.md index ffe02072c..f70ca9f34 100644 --- a/guides/plugins/plugins/testing/playwright/actor-pattern.md +++ b/guides/plugins/plugins/testing/playwright/actor-pattern.md @@ -207,7 +207,7 @@ export const SelectPaymentMethod = base.extend< This fixture is the "SelectPaymentMethod" task, which selects the desired radio button in the `paymentMethodRadioGroup` defined in the page object using keyboard navigation (automatically includes `a11y_checks` assertions). -To use "SelectPaymentMethod" in a test, you simply pass the name of the desired payment option. Here is a sample scenario for a successful checkout that shows how you can combine multiple tasks to build your test scenarios. +To use "SelectPaymentMethod" in a test, you simply pass the name of the desired payment option. Here is a sample scenario for a successful checkout that demonstrates how to combine multiple tasks to build your test scenarios. ```typescript import { test } from "./../BaseTestFile";