Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions guides/plugins/plugins/testing/playwright/actor-pattern.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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 demonstrates how to combine multiple tasks to build your test scenarios.

```typescript
import { test } from "./../BaseTestFile";
Expand All @@ -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);
```
Original file line number Diff line number Diff line change
Expand Up @@ -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 work properly.
:::