docs: improve by adding teardown and examples #23470

debs-obrien · 2023-06-02T13:35:48Z

adds teardown explanation to both projects doc and global setup doc
adds an example for global setup and teardown with dependencies as previously only had example for global setup
added a note to warn people that using dependencies is better than global method

aslushnikov

So my greatest concern is that the logging in demo will deteriorate quickly and won't work in the long run. What do we think about it?

aslushnikov · 2023-06-05T23:53:00Z

docs/src/test-global-setup-teardown-js.md

+    {
+      name: 'logged out chromium',
+      use: { ...devices['Desktop Chrome'] },
+      testIgnore: ['**/*loggedin.spec.ts', '**/*.setup.ts']


no need to ignore setup.ts here

docs/src/test-global-setup-teardown-js.md

aslushnikov · 2023-06-05T23:54:18Z

docs/src/test-global-setup-teardown-js.md

+
+This example will show you how to use project dependencies to create a global setup that logs into an application and saves the state in storage state. This is useful if you want to run multiple tests that require a sign in state and you want to avoid logging in for each test.
+
+The setup project will write the storage state into an 'auth.json' file in a '.auth' folder inside the playwright folder. By exporting a const of `STORAGE_STATE` we can then easily share the location of the storage file between projects with the [`method: BrowserContext.storageState`] method. This returns the storage state for the browser context and contains the current cookies and a local storage snapshot.


I think you want to refer to https://playwright.dev/docs/next/test-use-options#basic-options instead of BorwserContext.storageState() method.

docs/src/test-global-setup-teardown-js.md

aslushnikov · 2023-06-05T23:56:23Z

docs/src/test-global-setup-teardown-js.md

+import { test as setup, expect } from '@playwright/test';
+import { STORAGE_STATE } from '../playwright.config';
+
+setup('do login', async ({ page }) => {


I'm generally worried that this won't work in a recent future. Are we fine with this?

we need to create a kitchen sink app that we own so we can fully be confident that everything will always work but right now we dont have this so this is our best option. it gives a good outline of how things should work. we could change the domain to a dummy domain so people dont really test it out but I quite like testing things out in real scenarios and seeing for myself how things work

example simplified as per meeting discussion

aslushnikov · 2023-06-05T23:59:46Z

docs/src/test-projects-js.md

@@ -206,6 +205,61 @@ Running order:

 <img width="70%" style={{display: 'flex', margin: 'auto'}} alt="Browser login project is blue, database is red and e2e tests relies on both" loading="lazy" src="https://user-images.githubusercontent.com/13063165/225938262-33c1b78f-f092-4762-a478-7f8cbc1e3b21.jpg" />

+### Teardown
+
+You can also teardown your setup by adding a teardown property to your setup project. This will run after all dependencies have run.


a link to the teardown would be nice here

as in: [property: TestProject.teardown] ??

docs/src/test-projects-js.md

Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

aslushnikov · 2023-06-07T19:20:49Z

docs/src/test-global-setup-teardown-js.md

@@ -3,13 +3,32 @@ id: test-global-setup-teardown
 title: "Global setup and teardown"
 ---

-There are two ways to configure global setup and teardown: using a global setup file and setting it in the config under [`globalSetup`](#configure-globalsetup-and-globalteardown) or using [project dependencies](#project-dependencies). With project dependencies, you define a project that runs before all other projects. This is the recommended way to configure global setup as with Project dependencies your HTML report will show the global setup, trace viewer will record a trace of the setup and fixtures can be used.
+There are two ways to configure global setup and teardown: using a global setup file and setting it in the config under [`globalSetup`](#configure-globalsetup-and-globalteardown) or using [project dependencies](#project-dependencies). With project dependencies, you define a project that runs before all other projects and a teardown project that runs after the dependencies. This is the recommended way to configure global setup as with Project dependencies your HTML report will show the global setup, trace viewer will record a trace of the setup and fixtures can be used.


I'd drop the and a teardown project that runs after the dependencies since it's not really clear.

From the teardown project point of view, it runs after the dependant projects of the associated setup.

It's hard to formulate when the teardown runs from the point of view of some other dependent project.

docs/src/test-global-setup-teardown-js.md

aslushnikov · 2023-06-07T19:23:29Z

docs/src/test-global-setup-teardown-js.md

+
+### Teardown
+
+You can teardown your setup by adding a [`property: TestProject.teardown`] property to your setup project. This will run after all dependencies have run.


Suggested change

You can teardown your setup by adding a [`property: TestProject.teardown`] property to your setup project. This will run after all dependencies have run.

You can teardown your setup by adding a [`property: TestProject.teardown`] property to your setup project. This will run after all dependent projects have run.

aslushnikov · 2023-06-07T19:24:37Z

docs/src/test-global-setup-teardown-js.md

 ## Configure globalSetup and globalTeardown

 You can use the `globalSetup` option in the [configuration file](#configuration-object) to set something up once before running all tests. The global setup file must export a single function that takes a config object. This function will be run once before all the tests.

 Similarly, use `globalTeardown` to run something once after all the tests. Alternatively, let `globalSetup` return a function that will be used as a global teardown. You can pass data such as port number, authentication tokens, etc. from your global setup to your tests using environment variables.

+:::note
+Using globalSetup and globalTeardown will not produce traces or artifacts. If you want to produce traces and artifacts, use [project dependencies](#project-dependencies).


Suggested change

Using globalSetup and globalTeardown will not produce traces or artifacts. If you want to produce traces and artifacts, use [project dependencies](#project-dependencies).

Using `globalSetup` and `globalTeardown` will not produce traces or artifacts. If you want to produce traces and artifacts, use [project dependencies](#project-dependencies).

aslushnikov · 2023-06-07T19:27:42Z

docs/src/test-projects-js.md

@@ -206,6 +205,61 @@ Running order:

 <img width="70%" style={{display: 'flex', margin: 'auto'}} alt="Browser login project is blue, database is red and e2e tests relies on both" loading="lazy" src="https://user-images.githubusercontent.com/13063165/225938262-33c1b78f-f092-4762-a478-7f8cbc1e3b21.jpg" />

+### Teardown


I've just read this in docs/src/test-global-setup-teardown-js.md - is this supposed to be this way?

yeh I mean is teardown not also about projects or should it not be included there and only in global setup page??? Not sure

I would do a reference instead of copying the same text in two places

mxschmitt · 2023-06-08T13:25:23Z

docs/src/test-global-setup-teardown-js.md

+      name: 'setup',
+      testMatch: /global.setup\.ts/,
+    },
+    {


You should comment these curly brackets as well

mxschmitt · 2023-06-08T13:25:53Z

docs/src/test-global-setup-teardown-js.md

@@ -26,25 +45,184 @@ export default defineConfig({
      dependencies: ['setup'],
    },
    {


Ditto I think empty project is not valid

docs/src/test-global-setup-teardown-js.md

Co-authored-by: Max Schmitt <max@schmitt.mx> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

docs/src/test-global-setup-teardown-js.md

mxschmitt · 2023-06-08T18:23:43Z

docs/src/test-global-setup-teardown-js.md

+      name: 'cleanup db',
+      testMatch: /global.teardown\.ts/,
+    },
+    {


comment style

docs/src/test-global-setup-teardown-js.md

Co-authored-by: Max Schmitt <max@schmitt.mx> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

…23621)

docs: improve by adding teardown and examples

ed4c1e2

debs-obrien requested a review from mxschmitt June 2, 2023 15:05

aslushnikov reviewed Jun 6, 2023

View reviewed changes

debs-obrien and others added 3 commits June 6, 2023 16:23

Apply suggestions from code review

b699360

Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

fix after code review

d19d14c

fix example after review

66b6448

aslushnikov reviewed Jun 7, 2023

View reviewed changes

fix after review

c9700da

mxschmitt reviewed Jun 8, 2023

View reviewed changes

debs-obrien and others added 3 commits June 8, 2023 19:02

Apply suggestions from code review

cd19502

Co-authored-by: Max Schmitt <max@schmitt.mx> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

fix: after review

5a1934e

fix link

cbaa60a

mxschmitt reviewed Jun 8, 2023

View reviewed changes

debs-obrien and others added 2 commits June 9, 2023 17:43

Apply suggestions from code review

0fb7ad4

Co-authored-by: Max Schmitt <max@schmitt.mx> Signed-off-by: Debbie O'Brien <debs-obrien@users.noreply.github.com>

fix comment style

00bd287

mxschmitt approved these changes Jun 9, 2023

View reviewed changes

debs-obrien merged commit 0560a73 into microsoft:main Jun 9, 2023
2 checks passed

debs-obrien deleted the teardown-docs branch June 9, 2023 15:57

github-actions bot added a commit that referenced this pull request Jun 9, 2023

cherry-pick(#23470): docs: improve by adding teardown and examples

57521bb

debs-obrien pushed a commit that referenced this pull request Jun 9, 2023

cherry-pick(#23470): docs: improve by adding teardown and examples (#…

615e2e8

…23621)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: improve by adding teardown and examples #23470

docs: improve by adding teardown and examples #23470

debs-obrien commented Jun 2, 2023 •

edited

aslushnikov left a comment

aslushnikov Jun 5, 2023

aslushnikov Jun 5, 2023

aslushnikov Jun 5, 2023

debs-obrien Jun 6, 2023

debs-obrien Jun 6, 2023

aslushnikov Jun 5, 2023

debs-obrien Jun 6, 2023

aslushnikov Jun 7, 2023

aslushnikov Jun 7, 2023

aslushnikov Jun 7, 2023

aslushnikov Jun 7, 2023

debs-obrien Jun 8, 2023

aslushnikov Jun 8, 2023

mxschmitt Jun 8, 2023

mxschmitt Jun 8, 2023

mxschmitt Jun 8, 2023


		This example will show you how to use project dependencies to create a global setup that logs into an application and saves the state in storage state. This is useful if you want to run multiple tests that require a sign in state and you want to avoid logging in for each test.

		The setup project will write the storage state into an 'auth.json' file in a '.auth' folder inside the playwright folder. By exporting a const of `STORAGE_STATE` we can then easily share the location of the storage file between projects with the [`method: BrowserContext.storageState`] method. This returns the storage state for the browser context and contains the current cookies and a local storage snapshot.


		### Teardown

		You can teardown your setup by adding a [`property: TestProject.teardown`] property to your setup project. This will run after all dependencies have run.

	Using globalSetup and globalTeardown will not produce traces or artifacts. If you want to produce traces and artifacts, use [project dependencies](#project-dependencies).
	Using `globalSetup` and `globalTeardown` will not produce traces or artifacts. If you want to produce traces and artifacts, use [project dependencies](#project-dependencies).

		@@ -206,6 +205,61 @@ Running order:

		<img width="70%" style={{display: 'flex', margin: 'auto'}} alt="Browser login project is blue, database is red and e2e tests relies on both" loading="lazy" src="https://user-images.githubusercontent.com/13063165/225938262-33c1b78f-f092-4762-a478-7f8cbc1e3b21.jpg" />

		### Teardown

docs: improve by adding teardown and examples #23470

docs: improve by adding teardown and examples #23470

Conversation

debs-obrien commented Jun 2, 2023 • edited

aslushnikov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

debs-obrien commented Jun 2, 2023 •

edited