Playwright: Update documentation, Part 2. (#59017)

* Add step referring to env var export * Add return link to top * Implement navigation items for pages * Fix issues noted by Brie * Rename Troubleshooting
Automattic · Dec 14, 2021 · d95785e · d95785e
1 parent 086bfdf
commit d95785e
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 7 deletions.
diff --git a/test/e2e/README.md b/test/e2e/README.md
@@ -76,10 +76,11 @@ cd wp-calypso
 yarn install
 ```
 
-9. [decrypt](docs/test_environment.md) the secrets file.
+9. export required [environment variables](docs/test_environment.md).
 
 ```
-npm run decryptconfig
+export NODE_CONFIG_ENV=<name_of_decrypted_config_to_use>
+export CONFIG_KEY=<decryption_key_from_a8c_store>
 ```
 
 10. navigate to e2e directory.
@@ -88,13 +89,19 @@ npm run decryptconfig
 cd test/e2e
 ```
 
-11. transpile the `@automattic/calypso-e2e` package.
+11. [decrypt](docs/test_environment.md) the secrets file.
+
+```
+npm run decryptconfig
+```
+
+12. transpile the `@automattic/calypso-e2e` package.
 
 ```
 yarn workspace @automattic/calypso-e2e build
 ```
 
-12. run test.
+13. run test.
 
 ```
 yarn jest specs/specs-playwright/<spec_name>
@@ -106,7 +113,7 @@ Please refer to the [Advanced Setup](docs/setup.md) page.
 
 ## Contribute to E2E tests
 
-Please refer to the [] pages.
+Please refer to the [Writing Tests](docs/writing_tests.md) and [Style Guide](docs/style_guide.md) pages.
 
 ## Troubleshooting
 

diff --git a/test/e2e/docs/config_values.md b/test/e2e/docs/config_values.md
@@ -1,3 +1,5 @@
+Return to [Top Page](../README.md).
+
 # Config Values
 
 This list may be out of date as configuration value are added/removed.

diff --git a/test/e2e/docs/debugging.md b/test/e2e/docs/debugging.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./style_guide.md"><-- Style Guide</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./troubleshooting.md">--> Troubleshooting</a> </div>
+
+<br><br>
+
 # Debugging
 
 The Playwright [project page](https://playwright.dev/docs/debug/) has in-depth coverage of various debugging tools. This page will cover debugging scenarios unique to WordPress.com and Calypso.

diff --git a/test/e2e/docs/environment_variables.md b/test/e2e/docs/environment_variables.md
@@ -1,3 +1,5 @@
+Return to [Top Page](../README.md).
+
 # Environment Variables
 
 Environment Variables are values that are defined at the system level to serve as configuration for programs.

diff --git a/test/e2e/docs/library_objects.md b/test/e2e/docs/library_objects.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./writing_tests.md"><-- Writing tests</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./style_guide.md">Style Guide --></a> </div>
+
+<br><br>
+
 # Library Objects
 
 The `@automattic/calypso-e2e` package offers a robust set of library objects patterned after the Page Object Model. When developing a new test spec, try to leverage these objects as much as possible for a seamless experience.

diff --git a/test/e2e/docs/overview.md b/test/e2e/docs/overview.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><p></p> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./setup.md">Setup --></a> </div>
+
+<br><br>
+
 # Overview
 
 <!-- TOC -->

diff --git a/test/e2e/docs/setup.md b/test/e2e/docs/setup.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./overview.md"><-- Overview</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./test_environment.md">Test Environment --></a> </div>
+
+<br><br>
+
 # Setup
 
 <!-- TOC -->

diff --git a/test/e2e/docs/style_guide.md b/test/e2e/docs/style_guide.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./library_objects.md"><-- Library objects</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./debugging.md">Debugging --></a> </div>
+
+<br><br>
+
 # Style Guide
 
 <!-- TOC -->

diff --git a/test/e2e/docs/test_environment.md b/test/e2e/docs/test_environment.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./setup.md"><-- Setup</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./tests_local.md">Running tests on your machine --></a> </div>
+
+<br><br>
+
 # Test Environment
 
 <!-- TOC -->

diff --git a/test/e2e/docs/tests_ci.md b/test/e2e/docs/tests_ci.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./tests_local.md"><-- Running tests on your machine</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./writing_tests.md">Writing Tests --></a> </div>
+
+<br><br>
+
 # Running tests on CI
 
 <!-- TOC -->

diff --git a/test/e2e/docs/tests_local.md b/test/e2e/docs/tests_local.md
@@ -1,3 +1,9 @@
+<div style="width:454%; float:left" align="left"><a href="./test_environment.md"><-- Test Environment</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./tests_ci.md">Running tests on CI --></a> </div>
+
+<br><br>
+
 # Running tests on your machine
 
 <!-- TOC -->
@@ -11,6 +17,7 @@
     - [Save authentication cookies](#save-authentication-cookies)
     - [Target local webapp](#target-local-webapp)
     - [Debug mode](#debug-mode)
+      - [Notes on TypeScript](#notes-on-typescript)
 
 <!-- /TOC -->
 

diff --git a/test/e2e/docs/troubleshooting.md b/test/e2e/docs/troubleshooting.md
@@ -1,8 +1,13 @@
-# Troubleshooting & Debugging
+<div style="width: 45%; float:left" align="left"><a href="./debugging.md"><-- Debugging</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+
+<br><br>
+
+# Troubleshooting
 
 <!-- TOC -->
 
-- [Troubleshooting & Debugging](#troubleshooting--debugging)
+- [Troubleshooting](#troubleshooting)
   - [git pre-commit hook/husky](#git-pre-commit-hookhusky)
   - [Chromium binary is not available for arm64](#chromium-binary-is-not-available-for-arm64)
   - [Package 'lcms2', required by 'vips', not found](#package-lcms2-required-by-vips-not-found)

diff --git a/test/e2e/docs/writing_tests.md b/test/e2e/docs/writing_tests.md
@@ -1,3 +1,9 @@
+<div style="width: 45%; float:left" align="left"><a href="./tests_ci.md"><-- Running tests on CI</a> </div>
+<div style="width: 5%; float:left" align="center"><a href="./../README.md">Top</a></div>
+<div style="width: 45%; float:right"align="right"><a href="./library_objects.md">Library Objects --></a> </div>
+
+<br><br>
+
 # Writing Tests
 
 <!-- TOC -->