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
38 changes: 31 additions & 7 deletions docs/commands/browser/assertView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import Admonition from "@theme/Admonition";

## Использование {#usage}

```javascript
```typescript
await browser.assertView(state, options);
await browser.assertView(state, selector, options);
```

Expand All @@ -24,7 +25,7 @@ await browser.assertView(state, selector, options);
</thead>
<tbody>
<tr><td>[state](#state)</td><td>String</td><td>Обязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста.</td></tr>
<tr><td>[selector](#selector)</td><td>String или String[]</td><td>Обязательный параметр. Селектор DOM-элемента, который необходимо заснять.</td></tr>
<tr><td>[selector](#selector)</td><td>String или String[]</td><td>Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. При отсутствии команда скриншотит viewport.</td></tr>
<tr><td>[options](#options)</td><td>Object</td><td>Настройки команды _assertView_.</td></tr>

</tbody>
Expand All @@ -36,7 +37,17 @@ await browser.assertView(state, selector, options);

### selector

Обязательный параметр. Задает селектор DOM-элемента, который необходимо заснять.
Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию `body`. При его отсутствии `assertView` применяет следующие опции, которые имеют приоритет над `assertViewOpts` из конфига, но не над параметром `options`:

```
{
allowViewportOverflow: true,
compositeImage: false,
captureElementFromTop: false
}
```

Таким образом, по умолчанию без параметра `options` `assertView` скриншотит viewport.

### options

Expand Down Expand Up @@ -147,9 +158,9 @@ await browser.assertView(state, selector, options);

## Примеры использования {#examples}

**example-1.js**
**Визуальная проверка элемента**

```javascript
```typescript
it("should assert view", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".button");
Expand All @@ -159,9 +170,22 @@ it("should assert view", async ({ browser }) => {
});
```

**example-2.js**
**Визуальная проверка всего вьюпорта**

```typescript
it("should assert viewport without selector", async ({ browser }) => {
await browser.url("some/url");
await browser.execute(() => window.scrollTo(0, 1000));
await browser.assertView("plain");

await browser.$(".button").click();
await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
});
```

**Визуальная проверка с дополнительными опциями**

```javascript
```typescript
it("should assert view with given options", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".form", {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ Use the `assertView` command to take a screenshot for a specific test state and

## Usage {#usage}

```javascript
```typescript
await browser.assertView(state, options);
await browser.assertView(state, selector, options);
```

Expand All @@ -25,7 +26,7 @@ await browser.assertView(state, selector, options);
</thead>
<tbody>
<tr><td>[state](#state)</td><td>String</td><td>Required parameter. The name of the test state. It must be unique within a single test.</td></tr>
<tr><td>[selector](#selector)</td><td>String or String[]</td><td>Required parameter. The DOM element selector to capture.</td></tr>
<tr><td>[selector](#selector)</td><td>String or String[]</td><td>Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured.</td></tr>
<tr><td>[options](#options)</td><td>Object</td><td>Settings for the _assertView_ command.</td></tr>

</tbody>
Expand All @@ -37,7 +38,18 @@ Required parameter. Specifies the name of the test state. The name must be uniqu

### selector

Required parameter. Specifies the selector of the DOM element to capture.
Required parameter. Specifies the selector of the DOM element to capture. If not specified or skipped, will be set to `body` and the following options will be automatically added to `options`:

```
{
allowViewportOverflow: true,
compositeImage: false,
captureElementFromTop: false
}
```

These additional options will have higher priority than `assertViewOpts` from config, but lower priority than options from `options` parameter passed by user.
So, assertView without `selector` parameter will take a screenshot of the current viewport.

### options

Expand Down Expand Up @@ -148,9 +160,9 @@ Specifies the settings for the `assertView` command:

## Usage Examples {#examples}

**example-1.js**
**Visual check of certain element**

```javascript
```typescript
it("should assert view", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".button");
Expand All @@ -160,9 +172,22 @@ it("should assert view", async ({ browser }) => {
});
```

**example-2.js**
**Visual check of current viewport**

```typescript
it("should assert viewport without selector", async ({ browser }) => {
await browser.url("some/url");
await browser.execute(() => window.scrollTo(0, 1000));
await browser.assertView("plain");

await browser.$(".button").click();
await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
});
```

**Visual check with additional options**

```javascript
```typescript
it("should assert view with given options", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".form", {
Expand Down