-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🌟UI testing - Submit an enquiry form (#1464)
* UI Testing - adding test cases * Running example for create lead * Refactoring the code * Adding extension for playwright * disabling prettier log error * Adding env variable for target_URL for testing * Adding key reference in PR and main Slot's config * Updating yarn.lock conflict * Removing test-examples from the project * Flow - Adding enquiry flow to run the tests * Updating the env variable * Adding trailing double quote * Updating secret with env variables for test run * Adding mask to the secret * Adding workflow_dispatch variable * Refactoring code * Changing the retention day * Removing the pull request branches * Matt's Feedback * Adding doc for running it on local * Updating host url to prod * Renamed the variable name * Update create-lead * removing Id from util button * Matt's feedback 2 * Update pages/api/create-lead.ts Co-authored-by: Matt Wicks [SSW] <[email protected]> * Update pages/api/create-lead.ts Co-authored-by: Matt Wicks [SSW] <[email protected]> * Update components/bookingButton/bookingButton.tsx Co-authored-by: Matt Wicks [SSW] <[email protected]> * Update components/bookingButton/bookingButton.tsx Co-authored-by: Matt Wicks [SSW] <[email protected]> * Updated filename to make it more descriptive * Update .github/workflows/weekly-ui-tests.yml * ♻️ general cleanup - ui tests - renamed file to match component being tests - ui tests - dry'd up code, preferred placeholders over attribute selectors where possible - changed name of secret to bypass recaptcha (prefixed with recaptcha) - playwright config - base url for tests should be set at this level - readme - updated to run the ui tests the same way as the github action - env file - updated example as it was out of sync with real settings * lint fixes --------- Co-authored-by: Matt Wicks [SSW] <[email protected]> Co-authored-by: Matt Wicks <[email protected]>
- Loading branch information
3 people
authored
Oct 5, 2023
1 parent
6417974
commit 895ae4a
Showing
15 changed files
with
314 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| name: Weekly UI Test - Enquiry Form | ||
|
|
||
| on: | ||
| # workflow_dispatch: | ||
|
|
||
| schedule: | ||
| # Monday at 9 PM UTC ~> 7 AM AEST - https://cron.help/#0_21_*_*_SUN | ||
| - cron: "0 21 * * SUN" | ||
| #pull_request: | ||
| # branches: | ||
| # - main | ||
| workflow_dispatch: | ||
| inputs: | ||
| HOST_URL: | ||
| type: string | ||
| description: "Host URL" | ||
| default: "https://ssw.com.au" | ||
|
|
||
| env: | ||
| GH_TOKEN: ${{ github.token }} | ||
|
|
||
| defaults: | ||
| run: | ||
| shell: pwsh | ||
|
|
||
| permissions: | ||
| id-token: write | ||
| contents: read | ||
|
|
||
| jobs: | ||
| test: | ||
| timeout-minutes: 10 | ||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Setup node | ||
| uses: actions/setup-node@v3 | ||
| with: | ||
| node-version-file: ".nvmrc" | ||
|
|
||
| - name: Load .env file | ||
| uses: xom9ikk/dotenv@v2 | ||
| with: | ||
| path: ./.github | ||
|
|
||
| - name: Azure CLI - Login | ||
| uses: azure/login@v1 | ||
| with: | ||
| client-id: ${{ secrets.AZURE_CLIENT_ID }} | ||
| tenant-id: ${{ secrets.AZURE_TENANT_ID }} | ||
| subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} | ||
|
|
||
| - name: keyVault - Get Secret Key note | ||
| id: KeyVaultSecrets | ||
| run: | | ||
| # KV - Secret | ||
| $RECAPTCHA_BYPASS_SECRET = (az keyvault secret show --name SECRET-KEY-TO-BYPASS-RECAPTCHA --vault-name ${{ env.KEY_VAULT }} --query value -o tsv) | ||
| echo "::add-mask::$RECAPTCHA_BYPASS_SECRET" | ||
| echo "RECAPTCHA_BYPASS_SECRET=$RECAPTCHA_BYPASS_SECRET" >> $env:GITHUB_OUTPUT | ||
| Write-Host '✅ KV - Secret retrieved' | ||
| - name: Install dependencies | ||
| run: yarn | ||
|
|
||
| - name: Install Playwright Browsers | ||
| run: yarn playwright install --with-deps | ||
|
|
||
| - name: Run Playwright tests | ||
| run: yarn playwright test | ||
| env: | ||
| HOST_URL: ${{ inputs.HOST_URL }} | ||
| RECAPTCHA_BYPASS_SECRET: ${{ steps.KeyVaultSecrets.outputs.RECAPTCHA_BYPASS_SECRET }} | ||
|
|
||
| - uses: actions/upload-artifact@v2 | ||
| if: always() | ||
| with: | ||
| name: playwright-report | ||
| path: playwright-report/ | ||
| retention-days: 14 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| { | ||
| "recommendations": [ | ||
| "bradlc.vscode-tailwindcss", | ||
| "esbenp.prettier-vscode", | ||
| "graphql.vscode-graphql", | ||
| "dbaeumer.vscode-eslint" | ||
| ] | ||
| "recommendations": [ | ||
| "bradlc.vscode-tailwindcss", | ||
| "esbenp.prettier-vscode", | ||
| "graphql.vscode-graphql", | ||
| "dbaeumer.vscode-eslint", | ||
| "ms-playwright.playwright" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { defineConfig, devices } from "@playwright/test"; | ||
|
|
||
| /** | ||
| * Read environment variables from file. | ||
| * https://github.com/motdotla/dotenv | ||
| */ | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-var-requires | ||
| require("dotenv").config(); | ||
|
|
||
| /** | ||
| * See https://playwright.dev/docs/test-configuration. | ||
| */ | ||
| export default defineConfig({ | ||
| testDir: "./ui-tests", | ||
| /* Run tests in files in parallel */ | ||
| fullyParallel: true, | ||
| /* Fail the build on CI if you accidentally left test.only in the source code. */ | ||
| forbidOnly: !!process.env.CI, | ||
| /* Retry on CI only */ | ||
| retries: process.env.CI ? 2 : 0, | ||
| /* Opt out of parallel tests on CI. */ | ||
| workers: process.env.CI ? 1 : undefined, | ||
| /* Reporter to use. See https://playwright.dev/docs/test-reporters */ | ||
| reporter: "html", | ||
| /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ | ||
| use: { | ||
| /* Base URL to use in actions like `await page.goto('/')`. */ | ||
| baseURL: process.env.HOST_URL || "http://localhost:3000", | ||
|
|
||
| /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ | ||
| trace: "on-first-retry", | ||
| }, | ||
|
|
||
| /* Configure projects for major browsers */ | ||
| projects: [ | ||
| { | ||
| name: "chromium", | ||
| use: { ...devices["Desktop Chrome"] }, | ||
| }, | ||
|
|
||
| // { | ||
| // name: "firefox", | ||
| // use: { ...devices["Desktop Firefox"] }, | ||
| // }, | ||
|
|
||
| // { | ||
| // name: "webkit", | ||
| // use: { ...devices["Desktop Safari"] }, | ||
| // }, | ||
|
|
||
| /* Test against mobile viewports. */ | ||
| // { | ||
| // name: 'Mobile Chrome', | ||
| // use: { ...devices['Pixel 5'] }, | ||
| // }, | ||
| // { | ||
| // name: 'Mobile Safari', | ||
| // use: { ...devices['iPhone 12'] }, | ||
| // }, | ||
|
|
||
| /* Test against branded browsers. */ | ||
| // { | ||
| // name: 'Microsoft Edge', | ||
| // use: { ...devices['Desktop Edge'], channel: 'msedge' }, | ||
| // }, | ||
| // { | ||
| // name: 'Google Chrome', | ||
| // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, | ||
| // }, | ||
| ], | ||
|
|
||
| /* Run your local dev server before starting the tests */ | ||
| // webServer: { | ||
| // command: 'npm run start', | ||
| // url: 'http://127.0.0.1:3000', | ||
| // reuseExistingServer: !process.env.CI, | ||
| // }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { expect, test } from "@playwright/test"; | ||
|
|
||
| test("Can submit the booking form", async ({ page }) => { | ||
| await page.goto("/consulting/angular", { waitUntil: "networkidle" }); | ||
|
|
||
| await page | ||
| .getByRole("button") | ||
| .getByText("Book a FREE Initial Meeting") | ||
| .first() | ||
| .click(); | ||
|
|
||
| await page.waitForSelector(".react-responsive-modal-root form"); | ||
|
|
||
| // note: preference would be to reference by label, but the names aren't consistent with the field names | ||
| // note: getByPlaceholder is doing a partial match (the asterisks are hardcoded into the placeholder text) 🤮 | ||
| await page.getByPlaceholder("your full name").fill("🧪 Test"); | ||
| await page.getByPlaceholder("your email").fill("[email protected]"); | ||
| await page.getByPlaceholder("your phone").fill("0000000000"); | ||
| await page.locator("select[name='location']").selectOption("Australia"); // placeholder looks like location, but its actually an unselectable option | ||
| await page.locator("select[name='states']").selectOption("100000001"); | ||
| await page.getByPlaceholder("your company").fill("Test"); | ||
| await page.locator("select[name='referralSource']").selectOption("14"); | ||
| await page | ||
| .getByPlaceholder("how can we help you") | ||
| .fill( | ||
| `<br><br>Hi Account Managers,<br><br> This is a weekly test email to verify that the create lead flow is working. ${ | ||
| process.env.RECAPTCHA_BYPASS_SECRET ?? "No Key found" | ||
| }` | ||
| ); | ||
|
|
||
| await page.locator("button[type='submit']").first().click(); | ||
|
|
||
| const successToastId = "#success-toaster"; | ||
| await page.waitForSelector(successToastId); | ||
| const toastElement = await page.locator(successToastId).first(); | ||
| const toastText = await toastElement.textContent(); | ||
|
|
||
| await expect(toastText).toBe( | ||
| "Form submitted. We'll be in contact as soon as possible." | ||
| ); | ||
| }); |
Oops, something went wrong.