Skip to content

Commit ad008b1

Browse files
authored
docs: improve assertView docs (#27)
1 parent a86d194 commit ad008b1

File tree

2 files changed

+63
-14
lines changed

2 files changed

+63
-14
lines changed

docs/commands/browser/assertView.mdx

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import Admonition from "@theme/Admonition";
1212

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

15-
```javascript
15+
```typescript
16+
await browser.assertView(state, options);
1617
await browser.assertView(state, selector, options);
1718
```
1819

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

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

3738
### selector
3839

39-
Обязательный параметр. Задает селектор DOM-элемента, который необходимо заснять.
40+
Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию `body`. При его отсутствии `assertView` применяет следующие опции, которые имеют приоритет над `assertViewOpts` из конфига, но не над параметром `options`:
41+
42+
```
43+
{
44+
allowViewportOverflow: true,
45+
compositeImage: false,
46+
captureElementFromTop: false
47+
}
48+
```
49+
50+
Таким образом, по умолчанию без параметра `options` `assertView` скриншотит viewport.
4051

4152
### options
4253

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

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

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

152-
```javascript
163+
```typescript
153164
it("should assert view", async ({ browser }) => {
154165
await browser.url("some/url");
155166
await browser.assertView("plain", ".button");
@@ -159,9 +170,22 @@ it("should assert view", async ({ browser }) => {
159170
});
160171
```
161172

162-
**example-2.js**
173+
**Визуальная проверка всего вьюпорта**
174+
175+
```typescript
176+
it("should assert viewport without selector", async ({ browser }) => {
177+
await browser.url("some/url");
178+
await browser.execute(() => window.scrollTo(0, 1000));
179+
await browser.assertView("plain");
180+
181+
await browser.$(".button").click();
182+
await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
183+
});
184+
```
185+
186+
**Визуальная проверка с дополнительными опциями**
163187

164-
```javascript
188+
```typescript
165189
it("should assert view with given options", async ({ browser }) => {
166190
await browser.url("some/url");
167191
await browser.assertView("plain", ".form", {

i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ Use the `assertView` command to take a screenshot for a specific test state and
1313

1414
## Usage {#usage}
1515

16-
```javascript
16+
```typescript
17+
await browser.assertView(state, options);
1718
await browser.assertView(state, selector, options);
1819
```
1920

@@ -25,7 +26,7 @@ await browser.assertView(state, selector, options);
2526
</thead>
2627
<tbody>
2728
<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>
28-
<tr><td>[selector](#selector)</td><td>String or String[]</td><td>Required parameter. The DOM element selector to capture.</td></tr>
29+
<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>
2930
<tr><td>[options](#options)</td><td>Object</td><td>Settings for the _assertView_ command.</td></tr>
3031

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

3839
### selector
3940

40-
Required parameter. Specifies the selector of the DOM element to capture.
41+
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`:
42+
43+
```
44+
{
45+
allowViewportOverflow: true,
46+
compositeImage: false,
47+
captureElementFromTop: false
48+
}
49+
```
50+
51+
These additional options will have higher priority than `assertViewOpts` from config, but lower priority than options from `options` parameter passed by user.
52+
So, assertView without `selector` parameter will take a screenshot of the current viewport.
4153

4254
### options
4355

@@ -148,9 +160,9 @@ Specifies the settings for the `assertView` command:
148160

149161
## Usage Examples {#examples}
150162

151-
**example-1.js**
163+
**Visual check of certain element**
152164

153-
```javascript
165+
```typescript
154166
it("should assert view", async ({ browser }) => {
155167
await browser.url("some/url");
156168
await browser.assertView("plain", ".button");
@@ -160,9 +172,22 @@ it("should assert view", async ({ browser }) => {
160172
});
161173
```
162174

163-
**example-2.js**
175+
**Visual check of current viewport**
176+
177+
```typescript
178+
it("should assert viewport without selector", async ({ browser }) => {
179+
await browser.url("some/url");
180+
await browser.execute(() => window.scrollTo(0, 1000));
181+
await browser.assertView("plain");
182+
183+
await browser.$(".button").click();
184+
await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
185+
});
186+
```
187+
188+
**Visual check with additional options**
164189

165-
```javascript
190+
```typescript
166191
it("should assert view with given options", async ({ browser }) => {
167192
await browser.url("some/url");
168193
await browser.assertView("plain", ".form", {

0 commit comments

Comments
 (0)