diff --git a/README.md b/README.md index 9d17fab..4c2c1e4 100644 --- a/README.md +++ b/README.md @@ -98,17 +98,26 @@ Clone the generated repository on your local machine, move to the project root f $ npm i ``` +### Install playwright + +Execute command below to install playwright with browser engines (chromium, firefox, webkit) + +```bash +$ npx playwright-core install +``` + ## Running k6 tests To run a k6 test: ```bash -$ npm run k6 dist/k6/example-test.js +$ npm run k6 /dist/k6/example-test.js ``` This command does the following things: * Transpiles the Typescript files from `./src` to Javascript test files in the `./dist` folder using `Babel` and `Webpack` (you can also do this separately using `npm run build`). [Learn more](https://k6.io/docs/using-k6/modules#bundling-node-modules) * Runs the provided transpiled test with k6 using the Dockerfile and docker-compose, which will mount the `./dist` folder to `/dist`, making the tests in there available for the container. +* Runs executed with option `--insecure-skip-tls-verify` [insecure skip TLS verify](https://k6.io/docs/using-k6/k6-options/reference/#insecure-skip-tls-verify) ### Assumptions - The tests need to have the "_test_" word in the name to distinguish them from auxiliary files. You can change the entry [here](./webpack.config.js#L8). diff --git a/package.json b/package.json index ffa0f81..77c9081 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "scripts": { "playwright": "npx playwright test", - "k6": "npm run build && docker-compose run -T xk6-browser run --", + "k6": "npm run build && docker-compose run -T xk6-browser run --insecure-skip-tls-verify --", "build": "export NODE_OPTIONS=--openssl-legacy-provider && npx webpack" } } diff --git a/src/fixtures/pages.fixtures.ts b/src/fixtures/pages.fixtures.ts new file mode 100644 index 0000000..71403bc --- /dev/null +++ b/src/fixtures/pages.fixtures.ts @@ -0,0 +1,13 @@ +import { test as base } from '@playwright/test'; +import { k6MainPage } from "@pages/k6MainPage"; + +type PageFixtures = { + mainPage: k6MainPage; +}; + +export const test = base.extend({ + mainPage: async ({ page }, use) => { + await use(new k6MainPage(page)); + }, +}); +export { expect } from '@playwright/test'; \ No newline at end of file diff --git a/src/k6/example-test.ts b/src/k6/example-test.ts index 13f1642..c1a7c01 100644 --- a/src/k6/example-test.ts +++ b/src/k6/example-test.ts @@ -1,8 +1,8 @@ import { check } from 'k6'; import { Options } from 'k6/options'; +// @ts-ignore k6 types for typescript does not contain chromium, we should ignore this error import { chromium } from 'k6/experimental/browser'; -import { clickCheckboxOnk6 } from '@pages/example-page'; - +import { k6MainPage } from '@pages/k6MainPage'; export let options: Options = { vus: 1, @@ -16,7 +16,8 @@ export default async function () { const context = browser.newContext(); const page = context.newPage(); try { - await clickCheckboxOnk6(page); + let mainPage: k6MainPage = new k6MainPage(page); + await mainPage.clickCheckboxOnk6(); check(page, { 'checkbox is checked': (p) => p.locator('#checkbox-info-display').textContent() === 'Thanks for checking the box', diff --git a/src/pages/example-page.ts b/src/pages/example-page.ts deleted file mode 100644 index ba9b66a..0000000 --- a/src/pages/example-page.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { Page } from "@playwright/test/types/test"; - -export async function clickCheckboxOnk6(page: Page) { - await page.goto('https://test.k6.io/browser.php', { waitUntil: 'networkidle' }) - page.locator('#checkbox1').check(); -} \ No newline at end of file diff --git a/src/pages/k6MainPage.ts b/src/pages/k6MainPage.ts new file mode 100644 index 0000000..46a53a2 --- /dev/null +++ b/src/pages/k6MainPage.ts @@ -0,0 +1,24 @@ +import { Locator, Page, expect } from "@playwright/test"; + +export class k6MainPage { + constructor( + private page: Page, + private firstCheckBox: Locator = page.locator('#checkbox1'), + private checkBox: Locator = page.locator('#checkbox-info-display'), + ){ + + } + + async gotoTestK6() { + await this.page.goto('https://test.k6.io/browser.php', { waitUntil: 'networkidle' }) + } + + async clickCheckboxOnk6() { + this.gotoTestK6(); + this.firstCheckBox.check(); + } + + async verifyCheckboxText(text: string) { + await expect(this.checkBox).toHaveText(text); + } +} \ No newline at end of file diff --git a/src/playwright/example.spec.ts b/src/playwright/example.spec.ts index bf98dc4..8269754 100644 --- a/src/playwright/example.spec.ts +++ b/src/playwright/example.spec.ts @@ -1,10 +1,6 @@ -import { test, expect } from '@playwright/test'; -import { clickCheckboxOnk6 } from '../pages/example-page'; +import { test } from '@fixtures/pages.fixtures'; -test('checkbox should have been clicked', async ({ page }) => { - await clickCheckboxOnk6(page); - - const checkBox = page.locator('#checkbox-info-display'); - - await expect(checkBox).toHaveText('Thanks for checking the box'); +test('checkbox should have been clicked', async ({ mainPage }) => { + await mainPage.clickCheckboxOnk6(); + await mainPage.verifyCheckboxText('Thanks for checking the box'); }); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 106db17..8564133 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,10 +18,10 @@ "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, + "baseUrl": ".", "paths": { - "@pages/*": [ - "./pages/*" - ] + "@pages/*": ["src/pages/*"], + "@fixtures/*": ["src/fixtures/*"] } } } \ No newline at end of file