tests: Streamline hosted Playwright local setup

Streamline the process of setting up Playwright for local development of hosted service tests using dotenv. Add short guide to README as well.

.gitignore

@@ -47,3 +47,4 @@ rpmbuild
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.env

README.md

@@ -25,6 +25,7 @@ Frontend code for Image Builder.
 2. [File structure](#file-structure)
 3. [Style Guidelines](#style-guidelines)
 4. [Test Guidelines](#test-guidelines)
+5. [Running hosted service Playwright tests](#running-hosted-service-playwright-tests)
 
 ## How to build and run image-builder-frontend
 
@@ -354,3 +355,30 @@ Follow these steps to find and paste the certification file into the 'Keychain A
 8. Close the localhost screen.
 
 9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected.
+
+## Running hosted service Playwright tests
+
+1. Copy the [example env file](playwright_example.env) content and create a file named `.env` in the root directory of the project. Paste the example file content into it.
+   For local development fill in the:
+    * `BASE_URL` - `https://stage.foo.redhat.com:1337` is required, which is already set in the example config
+    * `PLAYWRIGHT_USER` - your consoledot stage username
+    * `PLAYWRIGHT_PASSWORD` - your consoledot stage password
+
+2. Make sure Playwright is installed as a dev dependency
+   ```bash
+   npm ci
+   ```
+
+3. Download the Playwright browsers with 
+   ```bash
+   npx playwright install
+   ```
+
+4. Start the local development stage server by running 
+   ```bash
+   npm run start:stage
+   ```
+
+5. Now you have two options of how to run the tests:
+   * (Preferred) Use VS Code and the [Playwright Test module for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). But other editors do have similar plugins for ease of use, if so desired
+   * Using terminal - `npx playwright test` will run the playwright test suite. `npx playwright test --headed` will run the suite in a vnc-like browser so you can watch it's interactions.

playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices, type ReporterDescription } from '@playwright/test';
+import 'dotenv/config';
 
 const reporters: ReporterDescription[] = [
   ['html'],

playwright/lib/lib.ts

@@ -25,12 +25,12 @@ export const togglePreview = async (page: Page) => {
 };
 
 export const login = async (page: Page) => {
-  if (!process.env.USER || !process.env.PASSWORD) {
+  if (!process.env.PLAYWRIGHT_USER || !process.env.PLAYWRIGHT_PASSWORD) {
     throw new Error('user or password not set in environment');
   }
 
-  const user = process.env.USER;
+  const user = process.env.PLAYWRIGHT_USER;
-  const password = process.env.PASSWORD;
+  const password = process.env.PLAYWRIGHT_PASSWORD;
 
   if (isHosted()) {
     return loginConsole(page, user, password);

playwright_example.env

@@ -0,0 +1,6 @@
+PLAYWRIGHT_USER="" # Required
+PLAYWRIGHT_PASSWORD="" # Required
+BASE_URL="https://stage.foo.redhat.com:1337" # Required
+CI="" # This is set to true for CI jobs, if checking for CI do  !!process.env.CI
+TOKEN="" # This is handled programmatically.
+PROXY="" # Set this if running directly against stage (not using "yarn local")

schutzbot/playwright_tests.sh

@@ -71,8 +71,8 @@ sudo systemctl start osbuild-worker@1
 sudo podman run \
      -e "PLAYWRIGHT_HTML_OPEN=never" \
      -e "CI=true" \
-     -e "USER=admin" \
+     -e "PLAYWRIGHT_USER=admin" \
-     -e "PASSWORD=foobar" \
+     -e "PLAYWRIGHT_PASSWORD=foobar" \
      -e "CURRENTS_PROJECT_ID=$CURRENTS_PROJECT_ID" \
      -e "CURRENTS_RECORD_KEY=$CURRENTS_RECORD_KEY" \
      --net=host \