Reuse authenticated browser state for others tests in Playwright

 Perform following steps,

1. Create folder playwright/.auth outside tests
2. Create folder setup inside tests
3. Create a test file inside setup folder "file_name.setup.ts"
1. Read userID and password from a file
2. Login and write the storage state in user.json file
• File directory will be "playwright/.auth/user.json"
3. await page.context().storageState({path: above_dir_path_var})
4. Create a project in playwright.config.ts
• { name: 'auth-setup', testMatch: 'ts_file_name_of_auth_setup' }
5. Add dependency and storage state in working project(s)
• use: { ..., storageState: 'directory_of_user.json' }, dependencies: ['name_of_auth_project']

Read from file and write to file

 Perform following steps,

1. import path from 'path';
• Need for path of files in order to access them
2. import fs from 'fs';
• Need for read and write on files
3. In order to read or write, first we need to resolve the directory of the file
• path.resolve(__dirname, 'directoryPath')
4. For reading, need to parse before read (reading JSON file)
• JSON.parse(fs.readFileSync(dirVar,'utf-8'))
5. For writing, need to join the file name with directory (writing JSON file)
• fs.writeFileSync( join(dirVar, 'filename'), JSON.stringify(contentVar) )

MailSlurp configuration in order to test authentication flow

 Perform following steps,

1. Create an account in mailslurp.com
2. Go to Dashboard -> Developers
3. Get the API access key
4. Install the mailslurp client in the project
• npm i --save mailslurp-client
5. Create an environment file (if not created already)
6. Create a new environment varriable in the ".env" (convension is to user all uppercase letters)
7. Assign the mailslurp API access key value for the environment varriable
8. Add the ".env" file in ".gitignore"
9. Playwright run extension in VSCode does not read from the ".env" file. So in order to make it work we need to do followings
1. Create a ".vscode" folder
2. Create a file called "settings.json" (beware of typos)
3. In the file create a entry for playwright environment\
4. Assign the API access key value here
10. Create a "utils" folder inside the "tests" folder
11. Create a file called "email-utils.ts" in the folder
12. Paste the mailslup code (javascript) provided and save
• In the code a inbox is created with defaults
• Do not forget to return the inbox at last, in order to use it
13. Create a new test in playwright
• import from utils
• create inbox
• console log the inbox (to verify its working)

Start with Playwright (TypeScript)

 Perform following steps to start,

1. Create a new folder
2. Open terminal in that folder
3. Enter command "npm init playwright@latest"
4. Go through the selection as required
5. Remember to choose TypeScript when presented
6. From VSCode remove test example folder
7. Remove example spec file
8. Update the playwright configuration file
• base URL
• project
• headless
9. Create a new test.spec.ts file inside the tests folder (if tests folder is selected)
10. Start the spec file with import
• import {test, expect} from '@playwright/test'
11. Start test function with callback

test ( 'Test case name', async({ page }) => {

 // your test actions and assertions

})