From 1543c1a3cc279923e672166085278d4b99774ff7 Mon Sep 17 00:00:00 2001 From: sarahschwartz <58856580+sarahschwartz@users.noreply.github.com> Date: Sun, 21 Apr 2024 12:21:25 -0600 Subject: [PATCH] add full test --- docs/intro.md | 78 ++++++++++++++++++++++++++++++++++++++++-- playwright.config.ts | 16 ++++++--- tests/example.spec.ts | 3 +- tests/utils/button.ts | 21 +++++------- tests/utils/runTest.ts | 52 ++++++++-------------------- tests/utils/setup.ts | 15 +------- 6 files changed, 112 insertions(+), 73 deletions(-) diff --git a/docs/intro.md b/docs/intro.md index 41812c0..b338317 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -9,7 +9,7 @@ sidebar_position: 1 Make a new folder called `project-folder`: @@ -21,7 +21,81 @@ mkdir project-folder Initialize a new React project. + + +```sh +npx create-react-app my-app +``` ## Add a "Hello World" button -Replace your file with the code below. \ No newline at end of file +Replace your `src/App.js` file with the code below: + + + +```js +import { useState } from 'react'; + +function App() { + const [showSecret, setShowSecret] = useState(false); + return ( +
+ + + {showSecret &&

Hello World

} +
+ ); +} + +export default App; +``` + +Now you have a React app that shows a secret message! + +## Testing the app + +To run the app locally, run the command below: + + + +```sh +npm start +``` + + + + + + + + diff --git a/playwright.config.ts b/playwright.config.ts index f08fe49..00394d1 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -11,6 +11,10 @@ import { defineConfig, devices } from '@playwright/test'; */ export default defineConfig({ testDir: './tests', + timeout: 60000 * 5, + expect: { + timeout: 8000, + }, /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ @@ -25,6 +29,8 @@ export default defineConfig({ use: { /* Base URL to use in actions like `await page.goto('/')`. */ // baseURL: 'http://127.0.0.1:3000', + ignoreHTTPSErrors: true, + baseURL: 'http://localhost:3000', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -40,9 +46,9 @@ export default defineConfig({ ], /* 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, - // }, + webServer: { + command: 'pnpm start', + url: 'http://localhost:3000', + reuseExistingServer: !process.env.CI, + }, }); diff --git a/tests/example.spec.ts b/tests/example.spec.ts index ac4774e..50bd0f4 100644 --- a/tests/example.spec.ts +++ b/tests/example.spec.ts @@ -1,12 +1,11 @@ import { test } from '@playwright/test'; -import { setupFolders, startServers, stopServers } from './utils/setup'; +import { setupFolders, stopServers } from './utils/setup'; import { runTest } from './utils/runTest'; test('has title', async ({ page, context }) => { // SETUP await context.grantPermissions(['clipboard-read', 'clipboard-write']); await setupFolders('project-folder'); - await startServers(page); // TEST await runTest(page, 'http://localhost:3000/docs/intro'); diff --git a/tests/utils/button.ts b/tests/utils/button.ts index fa184b7..9edbd9f 100644 --- a/tests/utils/button.ts +++ b/tests/utils/button.ts @@ -1,16 +1,8 @@ -import type { Page } from '@playwright/test'; +import { expect, type Page } from '@playwright/test'; -// export function getButtonByText(page: Page, selector: string | RegExp) { -// return page.locator('button').getByText(selector); -// } - -// export async function clickByLocator(page: Page, locator: string) { -// await page.locator(locator).click(); -// } - -// export async function clickByLabel(page: Page, label: string) { -// await page.getByLabel(label, { exact: true }).click(); -// } +export async function clickButtonByText(page: Page, selector: string | RegExp) { + await page.locator('button').getByText(selector).click(); +} export async function clickCopyButton(page: Page, id: string) { const buttonAriaLabel = 'Copy code to clipboard'; @@ -21,3 +13,8 @@ export async function clickCopyButton(page: Page, id: string) { return rawText; } +export async function findText(page: Page, text: string) { + const element = page.getByText('Hello World'); + console.log("ELEMENT:", element) + expect(element).toBeTruthy(); +} \ No newline at end of file diff --git a/tests/utils/runTest.ts b/tests/utils/runTest.ts index 55c4771..4f59769 100644 --- a/tests/utils/runTest.ts +++ b/tests/utils/runTest.ts @@ -3,6 +3,8 @@ import type { Page } from '@playwright/test'; import { runCommand } from './runCommand'; import { getTestActions } from './getTestActions'; import { visit } from './visit'; +import { writeToFile } from './files'; +import { findText, clickButtonByText } from './button'; export async function runTest( page: Page, @@ -28,44 +30,18 @@ export async function runTest( case 'goToUrl': await visit(page, step['data-url']); break; - // case 'compareFiles': - // await compareFiles( - // step['data-test-path-name'], - // step['data-ref-path-name'] - // ); - // break; - // case 'compareToFile': - // await compareToFile(page, step.id, step['data-filepath']); - // break; - // case 'writeToFile': - // await writeToFile(page, step.id, step['data-filepath']); - // break; - // case 'modifyFile': - // await modifyFile( - // page, - // step.id, - // step['data-filepath'], - // Number.parseInt(step['data-add-spaces-before']), - // step['data-add-spaces-after'], - // Number.parseInt(step['data-at-line']), - // step['data-remove-lines'], - // step['data-use-set-data'] - // ); - // break; - // case 'clickByRole': - // await page - // .getByRole(step['data-role'], { name: step['data-element-name'] }) - // .click(); - // break; - // case 'clickByTestId': - // await page.getByTestId(step['data-testid']).click(); - // break; - // case 'clickByLocator': - // await clickByLocator(page, step['data-click-by-locator']); - // break; - // case 'clickByLabel': - // await clickByLabel(page, step['data-click-by-label']); - // break; + case 'wait': + await page.waitForTimeout(Number.parseInt(step['data-timeout'])); + break; + case 'writeToFile': + await writeToFile(page, step.id, step['data-filepath']); + break; + case 'clickButtonFromTest': + await clickButtonByText(page, step['data-button-text']); + break; + case 'findText': + await findText(page, step['data-find-text']); + break; default: console.log('STEP NOT FOUND:', step); } diff --git a/tests/utils/setup.ts b/tests/utils/setup.ts index f359875..e642723 100644 --- a/tests/utils/setup.ts +++ b/tests/utils/setup.ts @@ -1,25 +1,12 @@ import { execSync } from 'child_process'; import fs from 'fs'; -import type { Page } from '@playwright/test'; - -const START_SERVER_COMMAND = "pnpm pm2 start npm --name 'docs-site' -- run start"; -const STOP_SERVERS = 'pnpm pm2 delete all'; - -export async function startServers(page: Page) { - console.log('STARTING DEV SERVER'); - const startOutput = execSync(START_SERVER_COMMAND, { - encoding: 'utf-8', - }); - console.log('START SERVER OUTPUT:', startOutput); - await page.waitForTimeout(10000); - console.log('WAITED 10 SECONDS'); -} export function stopServers() { const isRunning = checkIfServersRunning(); if (isRunning) { console.log('STOPPING SERVERS'); // stop & delete pm2 servers + const STOP_SERVERS = 'pnpm pm2 delete all'; execSync(STOP_SERVERS, { encoding: 'utf-8', });