diff --git a/de.vogella.git.first/playwright-example/README.md b/de.vogella.git.first/playwright-example/README.md new file mode 100644 index 0000000..dcaf22c --- /dev/null +++ b/de.vogella.git.first/playwright-example/README.md @@ -0,0 +1,29 @@ +# WordPress Playwright Example + +This example demonstrates how to use the `@wordpress/e2e-test-utils-playwright` +package to create a simple end-to-end test that creates a page, saves it as a +draft, publishes it and verifies the published page in a second browser +context. + +## Setup + +1. Install dependencies (requires internet access): + ```sh + npm install --save-dev playwright @wordpress/e2e-test-utils-playwright + ``` +2. Ensure a WordPress site is running locally and accessible via the + `WP_BASE_URL` environment variable (default is `http://localhost:8888`). + Provide admin credentials via `WP_USERNAME` and `WP_PASSWORD` environment + variables. + +## Running the test + +Execute Playwright using the provided npm script: + +```sh +npm test +``` + +This will run the `create-and-publish-page.spec.js` test which logs into the +WordPress admin, creates and publishes a page, then verifies the content from a +new browser context to simulate a logged-out user. diff --git a/de.vogella.git.first/playwright-example/package.json b/de.vogella.git.first/playwright-example/package.json new file mode 100644 index 0000000..4f8c5a3 --- /dev/null +++ b/de.vogella.git.first/playwright-example/package.json @@ -0,0 +1,13 @@ +{ + "name": "playwright-example", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "playwright test" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "commonjs" +} diff --git a/de.vogella.git.first/playwright-example/playwright.config.js b/de.vogella.git.first/playwright-example/playwright.config.js new file mode 100644 index 0000000..f75a0c8 --- /dev/null +++ b/de.vogella.git.first/playwright-example/playwright.config.js @@ -0,0 +1,13 @@ +const { devices } = require('@playwright/test'); + +/** @type {import('@playwright/test').PlaywrightTestConfig} */ +const config = { + timeout: 60000, + use: { + baseURL: process.env.WP_BASE_URL || 'http://localhost:8888', + headless: true, + trace: 'on-first-retry', + }, +}; + +module.exports = config; diff --git a/de.vogella.git.first/playwright-example/tests/create-and-publish-page.spec.js b/de.vogella.git.first/playwright-example/tests/create-and-publish-page.spec.js new file mode 100644 index 0000000..e5ceec3 --- /dev/null +++ b/de.vogella.git.first/playwright-example/tests/create-and-publish-page.spec.js @@ -0,0 +1,33 @@ +const { test, expect } = require('@playwright/test'); +const { + loginUser, + createNewPost, + publishPost, +} = require('@wordpress/e2e-test-utils-playwright'); + +// This example assumes you have a local WordPress instance running and the +// WP_USERNAME and WP_PASSWORD environment variables set for an administrator. + +/** + * Create a page, save it as draft, publish it and then verify it is visible + * from another browser context. + */ + +test('create, save and publish page', async ({ browser, page }) => { + await loginUser(); + + const title = `Playwright Test Page ${Date.now()}`; + await createNewPost({ postType: 'page', title }); + // The utils automatically save drafts when creating posts. + + // Publish the page + await publishPost(); + + const pageUrl = page.url(); + + // Open the public page in a new browser context (logged out) + const userContext = await browser.newContext(); + const userPage = await userContext.newPage(); + await userPage.goto(pageUrl); + await expect(userPage.locator('body')).toContainText(title); +});