Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs: merge screenshot to test-snapshot (#16567)

Browse source 
Co-authored-by: Max Schmitt <max@schmitt.mx>
This commit is contained in:
Debbie O'Brien 2022-08-16 15:54:56 +02:00 committed by GitHub
parent 51b41f6ce5
commit 7d641e4abd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 120 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
docs/src/screenshots.md
View file

@ -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.
<!-- TOC -->
## 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" });
```

120
docs/src/test-snapshots-js.md → docs/src/test-snapshots.md
View file

@ -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" });
```