diff --git a/docs/src/screenshots.md b/docs/src/screenshots.md deleted file mode 100644 index b9a9296405..0000000000 --- a/docs/src/screenshots.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: screenshots -title: "Screenshots" ---- - -Here is a quick way to capture a screenshot and save it into a file: - -```js -await page.screenshot({ path: 'screenshot.png' }); -``` - -```python async -await page.screenshot(path="screenshot.png") -``` - -```python sync -page.screenshot(path="screenshot.png") -``` - -```java -page.screenshot(new Page.ScreenshotOptions() - .setPath(Paths.get("screenshot.png"))) -``` - -```csharp -await Page.ScreenshotAsync(new() -{ - Path = "screenshot.png", -}); -``` - -Screenshots API accepts many parameters for image format, clip area, quality, etc. Make sure to check them out. - - - -## Full page screenshots - -Full page screenshot is a screenshot of a full scrollable page, as if you had a very -tall screen and the page could fit it entirely. - -```js -await page.screenshot({ path: 'screenshot.png', fullPage: true }); -``` - -```java -page.screenshot(new Page.ScreenshotOptions() - .setPath(Paths.get("screenshot.png")) - .setFullPage(true)); -``` - -```python async -await page.screenshot(path="screenshot.png", full_page=True) -``` - -```python sync -page.screenshot(path="screenshot.png", full_page=True) -``` - -```csharp -await Page.ScreenshotAsync(new() -{ - Path = "screenshot.png", - FullPage = true, -}); -``` - -## Capture into buffer - -Rather than writing into a file, you can get a buffer with the image and post-process it or pass it to a third party pixel diff facility. - -```js -const buffer = await page.screenshot(); -console.log(buffer.toString('base64')); -``` - -```java -byte[] buffer = page.screenshot(); -System.out.println(Base64.getEncoder().encode(buffer)); -``` - -```python async -# Capture into Image -screenshot_bytes = await page.screenshot() -print(base64.b64encode(screenshot_bytes).decode()) -``` - -```python sync -screenshot_bytes = page.screenshot() -print(base64.b64encode(screenshot_bytes).decode()) -``` - -```csharp -var bytes = await page.ScreenshotAsync(); -Console.WriteLine(Convert.ToBase64String(bytes)); -``` - - -## Element screenshot - -Sometimes it is useful to take a screenshot of a single element. - -```js -await page.locator('.header').screenshot({ path: 'screenshot.png' }); -``` - -```java -page.locator(".header").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot.png"))); -``` - -```python async -await page.locator(".header").screenshot(path="screenshot.png") -``` - -```python sync -page.locator(".header").screenshot(path="screenshot.png") -``` - -```csharp -await page.Locator(".header").ScreenshotAsync(new() { Path = "screenshot.png" }); -``` diff --git a/docs/src/test-snapshots-js.md b/docs/src/test-snapshots.md similarity index 67% rename from docs/src/test-snapshots-js.md rename to docs/src/test-snapshots.md index 39a343b544..aa81e0e86a 100644 --- a/docs/src/test-snapshots-js.md +++ b/docs/src/test-snapshots.md @@ -3,6 +3,9 @@ id: test-snapshots title: "Visual comparisons" --- +## toHaveScreenshot +* langs: js + Playwright Test includes the ability to produce and visually compare screenshots using `await expect(page).toHaveScreenshot()`. On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference. ```js tab=js-js @@ -137,3 +140,120 @@ test('example test', async ({ page }) => { ``` Snapshots are stored next to the test file, in a separate directory. For example, `my.spec.ts` file will produce and store snapshots in the `my.spec.ts-snapshots` directory. You should commit this directory to your version control (e.g. `git`), and review any changes to it. + +## Screenshots + +Here is a quick way to capture a screenshot and save it into a file: + +```js +await page.screenshot({ path: 'screenshot.png' }); +``` + +```python async +await page.screenshot(path="screenshot.png") +``` + +```python sync +page.screenshot(path="screenshot.png") +``` + +```java +page.screenshot(new Page.ScreenshotOptions() + .setPath(Paths.get("screenshot.png"))) +``` + +```csharp +await Page.ScreenshotAsync(new() +{ + Path = "screenshot.png", +}); +``` + +Screenshots API accepts many parameters for image format, clip area, quality, etc. Make sure to check them out. + + +## Full page screenshots + +Full page screenshot is a screenshot of a full scrollable page, as if you had a very +tall screen and the page could fit it entirely. + +```js +await page.screenshot({ path: 'screenshot.png', fullPage: true }); +``` + +```java +page.screenshot(new Page.ScreenshotOptions() + .setPath(Paths.get("screenshot.png")) + .setFullPage(true)); +``` + +```python async +await page.screenshot(path="screenshot.png", full_page=True) +``` + +```python sync +page.screenshot(path="screenshot.png", full_page=True) +``` + +```csharp +await Page.ScreenshotAsync(new() +{ + Path = "screenshot.png", + FullPage = true, +}); +``` + +## Capture into buffer + +Rather than writing into a file, you can get a buffer with the image and post-process it or pass it to a third party pixel diff facility. + +```js +const buffer = await page.screenshot(); +console.log(buffer.toString('base64')); +``` + +```java +byte[] buffer = page.screenshot(); +System.out.println(Base64.getEncoder().encode(buffer)); +``` + +```python async +# Capture into Image +screenshot_bytes = await page.screenshot() +print(base64.b64encode(screenshot_bytes).decode()) +``` + +```python sync +screenshot_bytes = page.screenshot() +print(base64.b64encode(screenshot_bytes).decode()) +``` + +```csharp +var bytes = await page.ScreenshotAsync(); +Console.WriteLine(Convert.ToBase64String(bytes)); +``` + + +## Element screenshot + +Sometimes it is useful to take a screenshot of a single element. + +```js +await page.locator('.header').screenshot({ path: 'screenshot.png' }); +``` + +```java +page.locator(".header").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot.png"))); +``` + +```python async +await page.locator(".header").screenshot(path="screenshot.png") +``` + +```python sync +page.locator(".header").screenshot(path="screenshot.png") +``` + +```csharp +await page.Locator(".header").ScreenshotAsync(new() { Path = "screenshot.png" }); +```