diff --git a/.github/workflows/cf_publish_release_npm.yml b/.github/workflows/cf_publish_release_npm.yml index 98fd5b66e..ef5df3e4b 100644 --- a/.github/workflows/cf_publish_release_npm.yml +++ b/.github/workflows/cf_publish_release_npm.yml @@ -3,13 +3,10 @@ name: "Cloudflare Publish - NPM" on: release: types: [published] - push: - branches: - - publish-action jobs: cf-release: - name: "publish to NPM" + name: "Publish Cloudflare Playwright to NPM" runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -32,9 +29,6 @@ jobs: if [[ "${GITHUB_REF}" == refs/tags/* ]]; then echo "Triggered by tag: ${GITHUB_REF#refs/tags/}" VERSION="${GITHUB_REF#refs/tags/}" - elif [[ "${GITHUB_REF}" == refs/heads/publish-action ]]; then - echo "Triggered by push to publish-action branch" - VERSION="0.0.0-test" else echo "❌ Unexpected trigger: ${GITHUB_REF}" exit 1 diff --git a/packages/playwright-cloudflare/README.md b/packages/playwright-cloudflare/README.md index 86fca6281..9e1983185 100644 --- a/packages/playwright-cloudflare/README.md +++ b/packages/playwright-cloudflare/README.md @@ -1,4 +1,137 @@ -# Playwright Browser Rendering +# Playwright for Cloudflare Workers + +### 🚧 Currently Unsupported (Work in Progress) + +The following capabilities are **not yet supported**, but we’re actively working on them. +This is **not an exhaustive list** β€” expect rapid changes as we work toward broader parity with the original feature set. + +- [API Testing](https://playwright.dev/docs/api-testing) +- [Playwright Test](https://playwright.dev/docs/test-configuration) except [Assertions](https://playwright.dev/docs/test-assertions) +- [Components](https://playwright.dev/docs/test-components) +- [Firefox](https://playwright.dev/docs/api/class-playwright#playwright-firefox), [Android](https://playwright.dev/docs/api/class-android) and [Electron](https://playwright.dev/docs/api/class-electron), as well as different versions of Chrome +- [Network](https://playwright.dev/docs/next/network#network) +- [Videos](https://playwright.dev/docs/next/videos) + +### You can also check [latest test results](https://playwright-full-test-report.pages.dev/) for a granular up to date list of the features that are fully supported + + +## Getting Started + +Create a [Cloudflare Worker](https://developers.cloudflare.com/workers/get-started/guide/_) + +```Shell +npm create cloudflare@latest -- cf-playwright-worker +``` + +## Installation + +```Shell +npm i -s @cloudflare/playwright +``` + +## Configuration + +πŸ“„ **Place this in `wrangler.toml`** + +```toml +compatibility_flags = [ "nodejs_compat" ] +browser = { binding = "MYBROWSER" } +``` + +## Example + +You can find a full running example here [Cloudflare Playwright running example](https://github.com/cloudflare/playwright/tree/main/packages/playwright-cloudflare/examples/todomvc) + +### Screenshot + +```js +import { launch } from '@cloudflare/playwright'; + +const todos = searchParams.getAll('todo'); + +const browser = await launch(env.MYBROWSER); +const page = await browser.newPage(); + +await page.goto('https://demo.playwright.dev/todomvc'); + +const TODO_ITEMS = todos.length > 0 ? todos : [ + 'buy some cheese', + 'feed the cat', + 'book a doctors appointment' +]; + +const newTodo = page.getByPlaceholder('What needs to be done?'); +for (const item of TODO_ITEMS) { + await newTodo.fill(item); + await newTodo.press('Enter'); +} + +const img = await page.screenshot(); + await browser.close(); + + return new Response(img, { + headers: { + 'Content-Type': 'image/png', + }, + }); +``` + +### Trace + +```js +import { launch } from '@cloudflare/playwright'; +import fs from "@cloudflare/playwright/fs"; + +const browser = await launch(env.MYBROWSER); +const page = await browser.newPage(); + +await page.context().tracing.start({ screenshots: true, snapshots: true }); + +// ... do something, screenshot for example + +await page.context().tracing.stop({ path: 'trace.zip' }); +await browser.close(); +const file = await fs.promises.readFile('trace.zip'); + +return new Response(file, { + status: 200, + headers: { + 'Content-Type': 'application/zip', + }, +}); +``` + +### Assertions + +```js +import { launch } from '@cloudflare/playwright'; +import { expect } from '@cloudflare/playwright/test'; + +const browser = await launch(env.MYBROWSER); +const page = await browser.newPage(); + +await page.goto('https://demo.playwright.dev/todomvc'); + +const TODO_ITEMS = todos.length > 0 ? todos : [ + 'buy some cheese', + 'feed the cat', + 'book a doctors appointment' +]; + +const newTodo = page.getByPlaceholder('What needs to be done?'); +for (const item of TODO_ITEMS) { + await newTodo.fill(item); + await newTodo.press('Enter'); +} + +await expect(page.getByTestId('todo-title')).toHaveCount(TODO_ITEMS.length); + +await Promise.all(TODO_ITEMS.map( + (value, index) => expect(page.getByTestId('todo-title').nth(index)).toHaveText(value) +)); +``` + +# Contribute ## Build @@ -10,7 +143,7 @@ cd packages/playwright-cloudflare npm run build ``` -## Run +## Run To run the TodoMVC example: