WIP

Author: davethepunkyone

docs/getting-started/1_Understanding_Playwright_Python.md

@@ -106,7 +106,7 @@ through a browser to generate the code for a test. You can access the `codegen`
 This will bring up a browser window, with the Playwright code generator running alongside, like so:
 
 <!-- vale off -->
-![An image of the Playwright codegen tool](./img/1-codegen.png "Playwright codegen")
+![An image of the Playwright codegen tool](./img/1-1_codegen.png "Playwright codegen")
 <!-- vale on -->
 
 When using the `codegen` tool, it is recommended to do the following:
@@ -124,7 +124,7 @@ basic assertions using the `codegen` tool:
 These are accessible via the floating menu when using the `codegen` tool, as highlighted in green here:
 
 <!-- vale off -->
-![An image of the Playwright codegen options](./img/2-codegen_tools.png "Playwright codegen tools")
+![An image of the Playwright codegen options](./img/1-2_codegen_tools.png "Playwright codegen tools")
 <!-- vale on -->
 
 Whilst the `codegen` tool will provide you with the basic code to get started, it's recommended that once you've got a working test, you consider refactoring any
@@ -149,7 +149,7 @@ To open a trace file, use the following command (replacing `<path-to-file>` with
 A trace file when opened looks like this:
 
 <!-- vale off -->
-![An image of the Playwright trace file](./img/3-show_trace.png "Playwright trace file view")
+![An image of the Playwright trace file](./img/1-3_show_trace.png "Playwright trace file view")
 <!-- vale on -->
 
 The primary information provided within the trace is:

docs/getting-started/3_From_Codegen_To_Maintainable_Tests.md

@@ -0,0 +1,37 @@
+# Getting Started #3: From Codegen To Maintainable Tests
+
+This guide outlines the process of taking a test generated using the `playwright codegen` tool to a state where it
+will be easy to maintain going forward.
+
+## Contents
+
+- [Getting Started #3: From Codegen To Maintainable Tests](#getting-started-3-from-codegen-to-maintainable-tests)
+  - [Contents](#contents)
+  - [Setting The Scene](#setting-the-scene)
+  - [Using `codegen` For A Test](#using-codegen-for-a-test)
+
+## Setting The Scene
+
+For this guide, we will look at refactoring a test that we've initially generated using the `codegen` utility provided
+by Playwright into a format that will make it easy to maintain going forward.
+
+To start, here is our application under test for the purposes of this guide:
+
+- Login Screen: A simple username / password login screen.
+
+<!-- vale off -->
+![An image of the Example Application login screen](./img/3-1_example_login.png "Example login screen with a username and password field")
+<!-- vale on -->
+
+- Main Menu: The landing page once logged in.
+
+<!-- vale off -->
+![An image of the Example Application home screen](./img/3-2_example_home.png "Example home screen with a navigation menu, news and alerts section")
+<!-- vale on -->
+
+- Search Patient: Some functionality to search for patients in our application.
+
+- View Patient: A page for viewing the patient we have selected from the search menu.
+
+## Using `codegen` For A Test
+