From 785e64f2b069918f5558796b9eb2e463df1be50f Mon Sep 17 00:00:00 2001 From: Tian Feng Date: Wed, 13 Sep 2023 10:20:57 -0700 Subject: [PATCH 1/5] chore: Clarify playwright screenshots issue --- .../_partials/_advanced-playwright.md | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md index ccb42159e0..9d5dc2e180 100644 --- a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md +++ b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md @@ -43,4 +43,27 @@ You can use Playwright to test your app on any browser and emulate a real device :::note Playwright is not a real Emulator or Simulator. It just emulates the browser behavior such as `userAgent`, `screenSize`, `viewport` and etc. -::: \ No newline at end of file +::: + +## Screenshots + +To enable Playwright screenshot capture, please refer to the [Playwright Config](https://playwright.dev/docs/test-configuration#automatic-screenshots). + +By default, Playwright generates screenshot files in the following structure: + +``` +demo-todo-app-Editing-should-save-edits-on-blur-webkit +demo-todo-app-Editing-should-save-edits-on-blur-webkit/test-finished-1.png +demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium +demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium/test-finished-1.png +``` + +However, Sauce Labs only supports uploading flattened files, which means that `test-finished-1.png` would be uploaded and overwritten. To set a unique screenshot name, you can refer to the [Playwright Screenshot documentation](https://playwright.dev/docs/screenshots) and set it as follows: + +```javascript +test('take a screenshot', async ({ page }, testInfo) => { + await page.goto('https://playwright.dev/'); + await page.screenshot({ path: 'screen_capture_unique_name.png' }); + await testInfo.attach('screen_capture_unique_name.png', { path: 'screen_capture_unique_name.png', contentType: 'image/png' }); +}); +``` From fd7a094b5a4005a17fe412ceb85d37618f2e0f1a Mon Sep 17 00:00:00 2001 From: Tian Feng Date: Wed, 13 Sep 2023 10:49:31 -0700 Subject: [PATCH 2/5] Klotski --- .../_partials/_advanced-playwright.md | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md index 9d5dc2e180..3ed598e23d 100644 --- a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md +++ b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md @@ -47,9 +47,18 @@ Playwright is not a real Emulator or Simulator. It just emulates the browser beh ## Screenshots -To enable Playwright screenshot capture, please refer to the [Playwright Config](https://playwright.dev/docs/test-configuration#automatic-screenshots). +To set a unique and trackable screenshot name, please refer to the [Playwright Screenshot documentation](https://playwright.dev/docs/screenshots) and use the following code snippet: -By default, Playwright generates screenshot files in the following structure: +```javascript +test('take a screenshot', async ({ page }, testInfo) => { + await page.goto('https://playwright.dev/'); + await page.screenshot({ path: 'screen_capture_unique_name.png' }); + await testInfo.attach('screen_capture_unique_name.png', { path: 'screen_capture_unique_name.png', contentType: 'image/png' }); +}); +``` + +:::caution +Please be aware that using the default screenshot setting in the [Playwright Config](https://playwright.dev/docs/test-use-options#recording-options) may have potential issues on Sauce Labs. By default, Playwright generates screenshot files in the following structure: ``` demo-todo-app-Editing-should-save-edits-on-blur-webkit @@ -58,12 +67,5 @@ demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium/test-finished-1.png ``` -However, Sauce Labs only supports uploading flattened files, which means that `test-finished-1.png` would be uploaded and overwritten. To set a unique screenshot name, you can refer to the [Playwright Screenshot documentation](https://playwright.dev/docs/screenshots) and set it as follows: - -```javascript -test('take a screenshot', async ({ page }, testInfo) => { - await page.goto('https://playwright.dev/'); - await page.screenshot({ path: 'screen_capture_unique_name.png' }); - await testInfo.attach('screen_capture_unique_name.png', { path: 'screen_capture_unique_name.png', contentType: 'image/png' }); -}); -``` +However, Sauce Labs only supports uploading flattened files, which means that `test-finished-1.png` would be uploaded and overwritten, resulting in only one `test-finished-1.png` existing. +::: From b5f17fa210449122546573b5344b6f172d0daee4 Mon Sep 17 00:00:00 2001 From: Tian Feng Date: Wed, 13 Sep 2023 12:36:00 -0700 Subject: [PATCH 3/5] refine --- .../automated-testing/_partials/_advanced-playwright.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md index 3ed598e23d..c60b36b755 100644 --- a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md +++ b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md @@ -47,7 +47,7 @@ Playwright is not a real Emulator or Simulator. It just emulates the browser beh ## Screenshots -To set a unique and trackable screenshot name, please refer to the [Playwright Screenshot documentation](https://playwright.dev/docs/screenshots) and use the following code snippet: +To get trackable screenshots in Sauce Cloud, please refer to the [Playwright Screenshot documentation](https://playwright.dev/docs/screenshots) and implement the following code snippet: ```javascript test('take a screenshot', async ({ page }, testInfo) => { @@ -58,7 +58,7 @@ test('take a screenshot', async ({ page }, testInfo) => { ``` :::caution -Please be aware that using the default screenshot setting in the [Playwright Config](https://playwright.dev/docs/test-use-options#recording-options) may have potential issues on Sauce Labs. By default, Playwright generates screenshot files in the following structure: +Please be aware that using the default screenshot setting in the [Playwright Config](https://playwright.dev/docs/test-use-options#recording-options) may result in potential issues on Sauce Labs. By default, Playwright generates screenshot files in the following structure: ``` demo-todo-app-Editing-should-save-edits-on-blur-webkit From 590411ab330dd27cfcc8a291fbda2faed2a7f933 Mon Sep 17 00:00:00 2001 From: Tian Feng Date: Wed, 13 Sep 2023 12:47:41 -0700 Subject: [PATCH 4/5] add more explanation for screenshots --- .../automated-testing/_partials/_advanced-playwright.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md index c60b36b755..7120cad050 100644 --- a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md +++ b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md @@ -57,6 +57,8 @@ test('take a screenshot', async ({ page }, testInfo) => { }); ``` +The captured screenshot will be logged in `sauce-test-report.json`` and can be accessed in the "Screenshots" tab on the Sauce Labs web UI. You can also download the screenshots as artifacts. + :::caution Please be aware that using the default screenshot setting in the [Playwright Config](https://playwright.dev/docs/test-use-options#recording-options) may result in potential issues on Sauce Labs. By default, Playwright generates screenshot files in the following structure: From 357a9b6dd09ccbca7cdcc9cbf5a84c3fc75981f6 Mon Sep 17 00:00:00 2001 From: Tian Feng Date: Wed, 13 Sep 2023 13:07:42 -0700 Subject: [PATCH 5/5] Update docs/web-apps/automated-testing/_partials/_advanced-playwright.md Co-authored-by: Alex Plischke --- .../automated-testing/_partials/_advanced-playwright.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md index 7120cad050..3abf03acad 100644 --- a/docs/web-apps/automated-testing/_partials/_advanced-playwright.md +++ b/docs/web-apps/automated-testing/_partials/_advanced-playwright.md @@ -69,5 +69,5 @@ demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium demo-todo-app-Routing-should-allow-me-to-display-all-items-chromium/test-finished-1.png ``` -However, Sauce Labs only supports uploading flattened files, which means that `test-finished-1.png` would be uploaded and overwritten, resulting in only one `test-finished-1.png` existing. +However, Sauce Labs only supports a flat file hiearchy, which means that `test-finished-1.png` would be uploaded and overwritten, since only one file named `test-finished-1.png` can be stored. :::