From e43c498a0dabfcbcdae0d9e9170127b705af8b56 Mon Sep 17 00:00:00 2001 From: Ivan Kabir Date: Mon, 12 Aug 2024 16:32:13 +0300 Subject: [PATCH 1/3] docs: improve assertView docs --- docs/commands/browser/assertView.mdx | 36 ++++++++++++++---- .../current/commands/browser/assertView.mdx | 38 +++++++++++++++---- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/docs/commands/browser/assertView.mdx b/docs/commands/browser/assertView.mdx index 7036009..801e760 100644 --- a/docs/commands/browser/assertView.mdx +++ b/docs/commands/browser/assertView.mdx @@ -12,7 +12,8 @@ import Admonition from "@theme/Admonition"; ## Использование {#usage} -```javascript +```typescript +await browser.assertView(state, options); await browser.assertView(state, selector, options); ``` @@ -24,7 +25,7 @@ await browser.assertView(state, selector, options); [state](#state)StringОбязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста. -[selector](#selector)String или String[]Обязательный параметр. Селектор DOM-элемента, который необходимо заснять. +[selector](#selector)String или String[]Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. [options](#options)ObjectНастройки команды _assertView_. @@ -36,7 +37,15 @@ await browser.assertView(state, selector, options); ### selector -Обязательный параметр. Задает селектор DOM-элемента, который необходимо заснять. +Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию `body`. При его отсутствии `assertView` применяет следующие опции, которые имеют приоритет над `assertViewOpts` из конфига, но не над параметром `options`: +``` +{ + allowViewportOverflow: true, + compositeImage: false, + captureElementFromTop: false +} +``` +Таким образом, по умолчанию без параметра `options` `assertView` скриншотит viewport. ### options @@ -147,9 +156,9 @@ await browser.assertView(state, selector, options); ## Примеры использования {#examples} -**example-1.js** +**example-1.ts** -```javascript +```typescript it("should assert view", async ({ browser }) => { await browser.url("some/url"); await browser.assertView("plain", ".button"); @@ -159,9 +168,22 @@ it("should assert view", async ({ browser }) => { }); ``` -**example-2.js** +**example-2.ts** + +```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 }); +}); +``` + +**example-3.ts** -```javascript +```typescript it("should assert view with given options", async ({ browser }) => { await browser.url("some/url"); await browser.assertView("plain", ".form", { diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx index b098130..b849423 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx @@ -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); ``` @@ -25,7 +26,7 @@ await browser.assertView(state, selector, options); [state](#state)StringRequired parameter. The name of the test state. It must be unique within a single test. -[selector](#selector)String or String[]Required parameter. The DOM element selector to capture. +[selector](#selector)String or String[]Optional parameter. Can be skipped. The DOM element selector to capture. [options](#options)ObjectSettings for the _assertView_ command. @@ -37,7 +38,17 @@ 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 @@ -148,9 +159,9 @@ Specifies the settings for the `assertView` command: ## Usage Examples {#examples} -**example-1.js** +**example-1.ts** -```javascript +```typescript it("should assert view", async ({ browser }) => { await browser.url("some/url"); await browser.assertView("plain", ".button"); @@ -160,9 +171,22 @@ it("should assert view", async ({ browser }) => { }); ``` -**example-2.js** +**example-2.ts** + +```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 }); +}); +``` + +**example-3.ts** -```javascript +```typescript it("should assert view with given options", async ({ browser }) => { await browser.url("some/url"); await browser.assertView("plain", ".form", { From d9c847904367b991eb6ce7483cd34f95844d1dd5 Mon Sep 17 00:00:00 2001 From: Ivan Kabir Date: Mon, 12 Aug 2024 17:16:05 +0300 Subject: [PATCH 2/3] docs: update docs --- docs/commands/browser/assertView.mdx | 8 ++++---- .../current/commands/browser/assertView.mdx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/commands/browser/assertView.mdx b/docs/commands/browser/assertView.mdx index 801e760..93bad48 100644 --- a/docs/commands/browser/assertView.mdx +++ b/docs/commands/browser/assertView.mdx @@ -25,7 +25,7 @@ await browser.assertView(state, selector, options); [state](#state)StringОбязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста. -[selector](#selector)String или String[]Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. +[selector](#selector)String или String[]Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. При отсутствии команда скриншотит viewport. [options](#options)ObjectНастройки команды _assertView_. @@ -156,7 +156,7 @@ await browser.assertView(state, selector, options); ## Примеры использования {#examples} -**example-1.ts** +**Визуальная проверка элемента** ```typescript it("should assert view", async ({ browser }) => { @@ -168,7 +168,7 @@ it("should assert view", async ({ browser }) => { }); ``` -**example-2.ts** +**Визуальная проверка всего вьюпорта** ```typescript it('should assert viewport without selector', async ({ browser }) => { @@ -181,7 +181,7 @@ it('should assert viewport without selector', async ({ browser }) => { }); ``` -**example-3.ts** +**Визуальная проверка с дополнительными опциями** ```typescript it("should assert view with given options", async ({ browser }) => { diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx index b849423..8d2fa24 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx @@ -26,7 +26,7 @@ await browser.assertView(state, selector, options); [state](#state)StringRequired parameter. The name of the test state. It must be unique within a single test. -[selector](#selector)String or String[]Optional parameter. Can be skipped. The DOM element selector to capture. +[selector](#selector)String or String[]Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured. [options](#options)ObjectSettings for the _assertView_ command. @@ -159,7 +159,7 @@ Specifies the settings for the `assertView` command: ## Usage Examples {#examples} -**example-1.ts** +**Visual check of certain element** ```typescript it("should assert view", async ({ browser }) => { @@ -171,7 +171,7 @@ it("should assert view", async ({ browser }) => { }); ``` -**example-2.ts** +**Visual check of current viewport** ```typescript it('should assert viewport without selector', async ({ browser }) => { @@ -184,7 +184,7 @@ it('should assert viewport without selector', async ({ browser }) => { }); ``` -**example-3.ts** +**Visual check with additional options** ```typescript it("should assert view with given options", async ({ browser }) => { From c14840b3eb340c66cd2dfda830eae87de00fb943 Mon Sep 17 00:00:00 2001 From: Ivan Kabir Date: Tue, 13 Aug 2024 17:43:21 +0300 Subject: [PATCH 3/3] docs: reformat docs --- docs/commands/browser/assertView.mdx | 14 ++++++++------ .../current/commands/browser/assertView.mdx | 17 +++++++++-------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/docs/commands/browser/assertView.mdx b/docs/commands/browser/assertView.mdx index 93bad48..3c8570b 100644 --- a/docs/commands/browser/assertView.mdx +++ b/docs/commands/browser/assertView.mdx @@ -38,13 +38,15 @@ await browser.assertView(state, selector, options); ### selector Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию `body`. При его отсутствии `assertView` применяет следующие опции, которые имеют приоритет над `assertViewOpts` из конфига, но не над параметром `options`: + ``` { allowViewportOverflow: true, compositeImage: false, captureElementFromTop: false } -``` +``` + Таким образом, по умолчанию без параметра `options` `assertView` скриншотит viewport. ### options @@ -171,13 +173,13 @@ it("should assert view", async ({ browser }) => { **Визуальная проверка всего вьюпорта** ```typescript -it('should assert viewport without selector', async ({ browser }) => { - await browser.url('some/url'); +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.assertView("plain"); - await browser.$('.button').click(); - await browser.assertView('clicked', { ignoreDiffPixelCount: 5 }); + await browser.$(".button").click(); + await browser.assertView("clicked", { ignoreDiffPixelCount: 5 }); }); ``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx index 8d2fa24..567fdc9 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/commands/browser/assertView.mdx @@ -38,18 +38,19 @@ 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. If not specified or skipped, will be set to `body` and the following options will be automatically added to `options`: +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 Specifies the settings for the `assertView` command: @@ -174,13 +175,13 @@ it("should assert view", async ({ browser }) => { **Visual check of current viewport** ```typescript -it('should assert viewport without selector', async ({ browser }) => { - await browser.url('some/url'); +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.assertView("plain"); - await browser.$('.button').click(); - await browser.assertView('clicked', { ignoreDiffPixelCount: 5 }); + await browser.$(".button").click(); + await browser.assertView("clicked", { ignoreDiffPixelCount: 5 }); }); ```