diff --git a/playwright.config.js b/playwright.config.js index a9e8a7ca7c..7a923409ce 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -84,8 +84,6 @@ module.exports = defineConfig({ } ], use: { - /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'https://localhost.paypal.com:8080', ignoreHTTPSErrors: true, /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', diff --git a/tests/playwright/practice-tests/accessibility.spec.js b/tests/playwright/practice-tests/accessibility.spec.js index 7b22709bd0..955231db60 100644 --- a/tests/playwright/practice-tests/accessibility.spec.js +++ b/tests/playwright/practice-tests/accessibility.spec.js @@ -1,11 +1,10 @@ -import { test, expect } from '@playwright/test'; import { AxeBuilder } from '@axe-core/playwright'; +import { test, expect } from '../setupTest'; test.describe('smart', () => { - test('message should not have any automatically detectable accessibility issues', async ({ page }) => { + test('message should not have any automatically detectable accessibility issues', async ({ message }) => { // Navigate to page - await page.goto(`/standalone.html?account=DEV_US_MULTI&amount=200&offer=PAY_LATER_SHORT_TERM`); - page.waitForLoadState('domcontentloaded'); + const page = await message({ amount: 200 }); const zoidIFrame = await page.$('iframe[name*="__zoid__paypal_message__"]'); const messageIframe = await zoidIFrame.contentFrame(); diff --git a/tests/playwright/practice-tests/example.spec.js b/tests/playwright/practice-tests/example.spec.js deleted file mode 100644 index b55818542a..0000000000 --- a/tests/playwright/practice-tests/example.spec.js +++ /dev/null @@ -1,19 +0,0 @@ -// @ts-check -const { test, expect } = require('@playwright/test'); - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); -}); diff --git a/tests/playwright/setupTest.js b/tests/playwright/setupTest.js new file mode 100644 index 0000000000..da078a564e --- /dev/null +++ b/tests/playwright/setupTest.js @@ -0,0 +1,18 @@ +import { test as base, expect } from '@playwright/test'; + +const test = base.extend({ + message: async ({ page }, use) => { + const webpageMessage = async (options = {}) => { + // Default options + const { amount = 100, account = 'DEV_US_MULTI', offer = 'PAY_LATER_SHORT_TERM' } = options; + + const url = `https://localhost.paypal.com:8080/snapshot/v2/sdk.html?account=${account}&amount=${amount}&offer=${offer}&env=local`; + await page.goto(url); + page.waitForLoadState('domcontentloaded'); + return page; + }; + await use(webpageMessage); + } + // modal: // TODO +}); +export { test, expect }; diff --git a/tests/playwright/test-examples/accessibility-examples/accessibility.spec.js b/tests/playwright/test-examples/accessibility-examples/accessibility.spec.js deleted file mode 100644 index 4d2e67186b..0000000000 --- a/tests/playwright/test-examples/accessibility-examples/accessibility.spec.js +++ /dev/null @@ -1,106 +0,0 @@ -import { test, expect, testInfo } from '@playwright/test'; -import { AxeBuilder } from '@axe-core/playwright'; -import { accessibilityBuilder } from './fixtures.spec'; - -test.describe('homepage', () => { - // 2 - test('should not have any automatically detectable accessibility issues', async ({ page }) => { - await page.goto('https://google.com/'); // 3 - - const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4 - - expect(accessibilityScanResults.violations).toEqual([]); // 5 - }); -}); - -test('navigation menu should not have automatically detectable accessibility violations', async ({ page }) => { - await page.goto('https://your-site.com/'); - - await page.getByRole('button', { name: 'Navigation Menu' }).click(); - - // It is important to waitFor() the page to be in the desired - // state *before* running analyze(). Otherwise, axe might not - // find all the elements your test expects it to scan. - await page.locator('#navigation-menu-flyout').waitFor(); - - const accessibilityScanResults = await new AxeBuilder({ page }).include('#navigation-menu-flyout').analyze(); - - expect(accessibilityScanResults.violations).toEqual([]); -}); - -test('should not have any automatically detectable WCAG A or AA violations', async ({ page }) => { - await page.goto('https://your-site.com/'); - - const accessibilityScanResults = await new AxeBuilder({ page }) - .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) - .analyze(); - - expect(accessibilityScanResults.violations).toEqual([]); -}); -test('should not have any accessibility violations outside of elements with known issues', async ({ page }) => { - await page.goto('https://your-site.com/page-with-known-issues'); - - const accessibilityScanResults = await new AxeBuilder({ page }).exclude('#element-with-known-issue').analyze(); - - expect(accessibilityScanResults.violations).toEqual([]); -}); - -// This is less fragile than snapshotting the entire violations array. -// expect(violationFingerprints(accessibilityScanResults)).toMatchSnapshot(); - -// my-test-utils.js -function violationFingerprints(accessibilityScanResults) { - const violationFingerprints = accessibilityScanResults.violations.map(violation => ({ - rule: violation.id, - // These are CSS selectors which uniquely identify each element with - // a violation of the rule in question. - targets: violation.nodes.map(node => node.target) - })); - - return JSON.stringify(violationFingerprints, null, 2); -} -// testInfo get full analysis of test -test('basic', async ({ page }, testInfo) => { - await page.goto('https://commitquality.com/practice-api'); - // wait for page to fully load before analyze - // await a link to load to know page is loaded .waitFor() - await page.locator('.back-link').waitFor(); - - // checks the whole page - const axeBuilder = await new AxeBuilder({ page }) - // what tests do these tags cover exactly? - // https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md - // fails with best-practice, passes without it - // In error output check which tags are failing - .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice']) - //disable rule - // .disableRules(["region"]) - - // .exclude("h2") - // .include(".back-link") - .analyze(); - - // get more test information - // link scan results - // adjust config for getting snap shots and videos - await testInfo.attach('accessibility-scan-results', { - body: JSON.stringify(axeBuilder, null, 2), - contentType: 'application/json' - }); - - // expect the page to equal no violations - expect(axeBuilder.violations).toEqual([]); -}); - -// test("fixture", async ({ page, accessibilityBuilder }) => { -// await page.goto("https://commitquality.com/practice-api"); -// // wait for page to fully load before analyze -// // await a link to load to know page is loaded .waitFor() -// await page.locator(".back-link").waitFor(); - -// // checks the whole page -// const axeBuilder = await accessibilityBuilder.analyze(); - -// // expect the page to equal no violations -// expect(axeBuilder.violations).toEqual([]); -// }); diff --git a/tests/playwright/test-examples/accessibility-examples/fixtures.spec.js b/tests/playwright/test-examples/accessibility-examples/fixtures.spec.js deleted file mode 100644 index 9f687fa344..0000000000 --- a/tests/playwright/test-examples/accessibility-examples/fixtures.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -// import { test as base, testInfo } from '@playwright/test'; -// import { AxeBuilder } from '@axe-core/playwright'; - -// export const test = -// base.extend < -// { -// accessibilityBuilder: AxeBuilder -// } > -// { -// accessibilityBuilder: async ({ page }, use) => { -// const accessibilityBuilder = await new AxeBuilder({ page }).withTags([ -// 'wcag2a', -// 'wcag2aa', -// 'wcag21a', -// 'wcag21aa', -// 'best-practice' -// ]); -// await use(accessibilityBuilder); -// } -// }; -// export const expect = base.expect; diff --git a/tests/playwright/test-examples/playwright-examples/annotationsandtags.spec.js b/tests/playwright/test-examples/playwright-examples/annotationsandtags.spec.js deleted file mode 100644 index 277bc5f75e..0000000000 --- a/tests/playwright/test-examples/playwright-examples/annotationsandtags.spec.js +++ /dev/null @@ -1,22 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.skip('test one', async ({ page }) => {}); -test('not yet ready', async ({ page }) => { - test.fail(); -}); -test.fixme('test to be fixed', async ({ page }) => {}); -test('slow test', async ({ page }) => { - test.slow(); -}); -test.only('focus this test', async ({ page }) => { - // Run only focused tests in the entire project -}); - -//tags @fast @smoke -test('Test full report @smoke', async ({ page }) => { - // ... -}); -// npx playwright test --grep “@smoke” - -// skip tests with certain tags -// npx playwright test --grep-invert “@smoke” diff --git a/tests/playwright/test-examples/playwright-examples/assertions.spec.js b/tests/playwright/test-examples/playwright-examples/assertions.spec.js deleted file mode 100644 index dca9c7b79a..0000000000 --- a/tests/playwright/test-examples/playwright-examples/assertions.spec.js +++ /dev/null @@ -1,38 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('Assertions demo', async ({ page }) => { - await page.goto('https://kitchen.applitools.com/'); - await page.pause(); - // Assertions - // .not - not not have something - // .soft - fail but continue in the test - - //check element is present or not - await expect(page.locator('text=The Kitchen')).toHaveCount(1); - if (await page.$('text=The Kitchen')) { - await page.locator('text=The Kitchen').click(); - } - // check element is hidden or visible - await expect(page.locator('text=The Kitchen')).toBeVisible(); - await expect.soft(page.locator('text=The Kitchen')).toBeHidden(); - - //check element enabled or disabled - await expect(page.locator('text=The Kitchen')).toBeEnabled(); - await expect.soft(page.locator('text=The Kitchen')).toBeDisabled(); - - //check text - await expect(page.locator('text=The Kitchen')).toHaveText('The Kitchen'); - await expect(page.locator('text=The Kitchen')).not.toHaveText('The Kitchen'); - - //check attribute value - await expect(page.locator('text=The Kitchen')).toHaveAttribute('class', /.css-dpmy2a/); - await expect(page.locator('text=The Kitchen')).toHaveClass(/.css-dpmy2a/); - - // check page URL and title - await expect(page).toHaveURL('https://kitchen.applitools.com/'); - await expect(page).toHaveTitle(/.*Kitchen/); - - await page.pause(); - // visual validation with screenshot - await expect(page).toHaveScreenshot(); -}); diff --git a/tests/playwright/test-examples/playwright-examples/demo-todo-app.spec.js b/tests/playwright/test-examples/playwright-examples/demo-todo-app.spec.js deleted file mode 100644 index c3b3791363..0000000000 --- a/tests/playwright/test-examples/playwright-examples/demo-todo-app.spec.js +++ /dev/null @@ -1,428 +0,0 @@ -// @ts-check -const { test, expect } = require('@playwright/test'); - -test.beforeEach(async ({ page }) => { - await page.goto('https://demo.playwright.dev/todomvc'); -}); - -const TODO_ITEMS = ['buy some cheese', 'feed the cat', 'book a doctors appointment']; - -test.describe('New Todo', () => { - test('should allow me to add todo items', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - // Create 1st todo. - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); - - // Make sure the list only has one todo item. - await expect(page.getByTestId('todo-title')).toHaveText([TODO_ITEMS[0]]); - - // Create 2nd todo. - await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press('Enter'); - - // Make sure the list now has two todo items. - await expect(page.getByTestId('todo-title')).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); - - await checkNumberOfTodosInLocalStorage(page, 2); - }); - - test('should clear text input field when an item is added', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - // Create one todo item. - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); - - // Check that input is empty. - await expect(newTodo).toBeEmpty(); - await checkNumberOfTodosInLocalStorage(page, 1); - }); - - test('should append new items to the bottom of the list', async ({ page }) => { - // Create 3 items. - await createDefaultTodos(page); - - // create a todo count locator - const todoCount = page.getByTestId('todo-count'); - - // Check test using different methods. - await expect(page.getByText('3 items left')).toBeVisible(); - await expect(todoCount).toHaveText('3 items left'); - await expect(todoCount).toContainText('3'); - await expect(todoCount).toHaveText(/3/); - - // Check all items in one call. - await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS); - await checkNumberOfTodosInLocalStorage(page, 3); - }); -}); - -test.describe('Mark all as completed', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test.afterEach(async ({ page }) => { - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test('should allow me to mark all items as completed', async ({ page }) => { - // Complete all todos. - await page.getByLabel('Mark all as complete').check(); - - // Ensure all todos have 'completed' class. - await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - }); - - test('should allow me to clear the complete state of all items', async ({ page }) => { - const toggleAll = page.getByLabel('Mark all as complete'); - // Check and then immediately uncheck. - await toggleAll.check(); - await toggleAll.uncheck(); - - // Should be no completed classes. - await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']); - }); - - test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => { - const toggleAll = page.getByLabel('Mark all as complete'); - await toggleAll.check(); - await expect(toggleAll).toBeChecked(); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - - // Uncheck first todo. - const firstTodo = page.getByTestId('todo-item').nth(0); - await firstTodo.getByRole('checkbox').uncheck(); - - // Reuse toggleAll locator and make sure its not checked. - await expect(toggleAll).not.toBeChecked(); - - await firstTodo.getByRole('checkbox').check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - - // Assert the toggle all is checked again. - await expect(toggleAll).toBeChecked(); - }); -}); - -test.describe('Item', () => { - test('should allow me to mark items as complete', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press('Enter'); - } - - // Check first item. - const firstTodo = page.getByTestId('todo-item').nth(0); - await firstTodo.getByRole('checkbox').check(); - await expect(firstTodo).toHaveClass('completed'); - - // Check second item. - const secondTodo = page.getByTestId('todo-item').nth(1); - await expect(secondTodo).not.toHaveClass('completed'); - await secondTodo.getByRole('checkbox').check(); - - // Assert completed class. - await expect(firstTodo).toHaveClass('completed'); - await expect(secondTodo).toHaveClass('completed'); - }); - - test('should allow me to un-mark items as complete', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press('Enter'); - } - - const firstTodo = page.getByTestId('todo-item').nth(0); - const secondTodo = page.getByTestId('todo-item').nth(1); - const firstTodoCheckbox = firstTodo.getByRole('checkbox'); - - await firstTodoCheckbox.check(); - await expect(firstTodo).toHaveClass('completed'); - await expect(secondTodo).not.toHaveClass('completed'); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - await firstTodoCheckbox.uncheck(); - await expect(firstTodo).not.toHaveClass('completed'); - await expect(secondTodo).not.toHaveClass('completed'); - await checkNumberOfCompletedTodosInLocalStorage(page, 0); - }); - - test('should allow me to edit an item', async ({ page }) => { - await createDefaultTodos(page); - - const todoItems = page.getByTestId('todo-item'); - const secondTodo = todoItems.nth(1); - await secondTodo.dblclick(); - await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]); - await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter'); - - // Explicitly assert the new text value. - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]); - await checkTodosInLocalStorage(page, 'buy some sausages'); - }); -}); - -test.describe('Editing', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test('should hide other controls when editing', async ({ page }) => { - const todoItem = page.getByTestId('todo-item').nth(1); - await todoItem.dblclick(); - await expect(todoItem.getByRole('checkbox')).not.toBeVisible(); - await expect( - todoItem.locator('label', { - hasText: TODO_ITEMS[1] - }) - ).not.toBeVisible(); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test('should save edits on blur', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur'); - - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]); - await checkTodosInLocalStorage(page, 'buy some sausages'); - }); - - test('should trim entered text', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages '); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); - - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]); - await checkTodosInLocalStorage(page, 'buy some sausages'); - }); - - test('should remove the item if an empty text string was entered', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(''); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); - - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test('should cancel edits on escape', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape'); - await expect(todoItems).toHaveText(TODO_ITEMS); - }); -}); - -test.describe('Counter', () => { - test('should display the current number of todo items', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - // create a todo count locator - const todoCount = page.getByTestId('todo-count'); - - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); - await expect(todoCount).toContainText('1'); - - await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press('Enter'); - await expect(todoCount).toContainText('2'); - - await checkNumberOfTodosInLocalStorage(page, 2); - }); -}); - -test.describe('Clear completed button', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - }); - - test('should display the correct text', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check(); - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible(); - }); - - test('should remove completed items when clicked', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).getByRole('checkbox').check(); - await page.getByRole('button', { name: 'Clear completed' }).click(); - await expect(todoItems).toHaveCount(2); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test('should be hidden when there are no items that are completed', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check(); - await page.getByRole('button', { name: 'Clear completed' }).click(); - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden(); - }); -}); - -test.describe('Persistence', () => { - test('should persist its data', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press('Enter'); - } - - const todoItems = page.getByTestId('todo-item'); - const firstTodoCheck = todoItems.nth(0).getByRole('checkbox'); - await firstTodoCheck.check(); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); - await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(['completed', '']); - - // Ensure there is 1 completed item. - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - // Now reload. - await page.reload(); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); - await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(['completed', '']); - }); -}); - -test.describe('Routing', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - // make sure the app had a chance to save updated todos in storage - // before navigating to a new view, otherwise the items can get lost :( - // in some frameworks like Durandal - await checkTodosInLocalStorage(page, TODO_ITEMS[0]); - }); - - test('should allow me to display active items', async ({ page }) => { - const todoItem = page.getByTestId('todo-item'); - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); - - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Active' }).click(); - await expect(todoItem).toHaveCount(2); - await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test('should respect the back button', async ({ page }) => { - const todoItem = page.getByTestId('todo-item'); - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); - - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - await test.step('Showing all items', async () => { - await page.getByRole('link', { name: 'All' }).click(); - await expect(todoItem).toHaveCount(3); - }); - - await test.step('Showing active items', async () => { - await page.getByRole('link', { name: 'Active' }).click(); - }); - - await test.step('Showing completed items', async () => { - await page.getByRole('link', { name: 'Completed' }).click(); - }); - - await expect(todoItem).toHaveCount(1); - await page.goBack(); - await expect(todoItem).toHaveCount(2); - await page.goBack(); - await expect(todoItem).toHaveCount(3); - }); - - test('should allow me to display completed items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Completed' }).click(); - await expect(page.getByTestId('todo-item')).toHaveCount(1); - }); - - test('should allow me to display all items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Active' }).click(); - await page.getByRole('link', { name: 'Completed' }).click(); - await page.getByRole('link', { name: 'All' }).click(); - await expect(page.getByTestId('todo-item')).toHaveCount(3); - }); - - test('should highlight the currently applied filter', async ({ page }) => { - await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected'); - - //create locators for active and completed links - const activeLink = page.getByRole('link', { name: 'Active' }); - const completedLink = page.getByRole('link', { name: 'Completed' }); - await activeLink.click(); - - // Page change - active items. - await expect(activeLink).toHaveClass('selected'); - await completedLink.click(); - - // Page change - completed items. - await expect(completedLink).toHaveClass('selected'); - }); -}); - -async function createDefaultTodos(page) { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); - - for (const item of TODO_ITEMS) { - await newTodo.fill(item); - await newTodo.press('Enter'); - } -} - -/** - * @param {import('@playwright/test').Page} page - * @param {number} expected - */ -async function checkNumberOfTodosInLocalStorage(page, expected) { - return await page.waitForFunction(e => { - return JSON.parse(localStorage['react-todos']).length === e; - }, expected); -} - -/** - * @param {import('@playwright/test').Page} page - * @param {number} expected - */ -async function checkNumberOfCompletedTodosInLocalStorage(page, expected) { - return await page.waitForFunction(e => { - return JSON.parse(localStorage['react-todos']).filter(i => i.completed).length === e; - }, expected); -} - -/** - * @param {import('@playwright/test').Page} page - * @param {string} title - */ -async function checkTodosInLocalStorage(page, title) { - return await page.waitForFunction(t => { - return JSON.parse(localStorage['react-todos']) - .map(i => i.title) - .includes(t); - }, title); -} diff --git a/tests/playwright/test-examples/playwright-examples/example.spec.js b/tests/playwright/test-examples/playwright-examples/example.spec.js deleted file mode 100644 index b55818542a..0000000000 --- a/tests/playwright/test-examples/playwright-examples/example.spec.js +++ /dev/null @@ -1,19 +0,0 @@ -// @ts-check -const { test, expect } = require('@playwright/test'); - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); -}); diff --git a/tests/playwright/test-examples/playwright-examples/example2.spec.js b/tests/playwright/test-examples/playwright-examples/example2.spec.js deleted file mode 100644 index d38687bfb8..0000000000 --- a/tests/playwright/test-examples/playwright-examples/example2.spec.js +++ /dev/null @@ -1,29 +0,0 @@ -// @ts-check -const { test, expect } = require('@playwright/test'); - -let context; -let page; -test.beforeAll(async ({ browser }) => { - context = await browser.newContext(); - await context.tracing.start({ screenshots: true, snapshots: true }); - page = await context.newPage(); -}); -test.afterAll(async () => { - await context.tracing.stop({ path: 'test2_trace.zip' }); -}); -test('has title', async ({}) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({}) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); -}); diff --git a/tests/playwright/test-examples/playwright-examples/hookeandgroups.spec.js b/tests/playwright/test-examples/playwright-examples/hookeandgroups.spec.js deleted file mode 100644 index fd0ec362cd..0000000000 --- a/tests/playwright/test-examples/playwright-examples/hookeandgroups.spec.js +++ /dev/null @@ -1,27 +0,0 @@ -import { test, expect } from '@playwright/test'; -test.describe('all my tests', () => { - test.beforeEach(async ({ page }) => { - await page.goto('https://www.saucedemo.com/'); - - await page.locator('[data-test="username"]').fill('standard_user'); - await page.locator('[data-test="password"]').fill('secret_sauce'); - await page.locator('[data-test="login-button"]').click(); - await page.waitForURL('https://www.saucedemo.com/inventory.html'); - }); - test.afterAll(async ({ page }) => { - await page.close(); - }); - test('homepage', async ({ page }) => { - await page.goto('https://www.saucedemo.com/'); - - await page.locator('[data-test="add-to-cart-sauce-labs-bike-light"]').click(); - await page.getByText('Sauce Labs Bolt T-ShirtGet').click(); - await page.locator('[data-test="add-to-cart-sauce-labs-bolt-t-shirt"]').click(); - await page.locator('[data-test="item-5-title-link"]').click(); - await page.locator('[data-test="add-to-cart"]').click(); - }); - test('logout', async ({ page }) => { - await page.getByRole('button', { name: 'Open Menu' }).click(); - await page.locator('[data-test="logout-sidebar-link"]').click(); - }); -}); diff --git a/tests/playwright/test-examples/playwright-examples/selectors.spec.js b/tests/playwright/test-examples/playwright-examples/selectors.spec.js deleted file mode 100644 index 51649d9762..0000000000 --- a/tests/playwright/test-examples/playwright-examples/selectors.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('selectors demo', async ({ page }) => { - await page.goto('https://www.saucedemo.com/'); - // using any object property - await page.click('id=user-name'); - await page.locator('id=user-name').fill('Edision'); - await page.locator('[id=user-name]').fill('Edn'); - - // using css selector - await page.locator('#login-button').click(); - await page.pause(); - - //using xpath - await page.locator('xpath=//input[@id="user-name"]').fill('Faraday'); - await page.locator('//input[@id="user-name"]').fill('ramanujan'); - - // using text - await page.locator('text=LOGIN').click(); - await page.locator('input:has-text("LOGIN")').click(); -}); diff --git a/tests/playwright/test-examples/playwright-examples/slow_motion_video_recording.spec.js b/tests/playwright/test-examples/playwright-examples/slow_motion_video_recording.spec.js deleted file mode 100644 index 3c84951c24..0000000000 --- a/tests/playwright/test-examples/playwright-examples/slow_motion_video_recording.spec.js +++ /dev/null @@ -1,26 +0,0 @@ -import { test, expect, chromium } from '@playwright/test'; - -test('slow motion and video recording demo', async () => { - const browser = await chromium.launch({ - slowMo: 500, - headless: false - }); - const context = await browser.newContext({ - recordVideo: { - // creates video folder of test, file recording there - dir: 'videos/', - size: { width: 800, height: 600 } - } - }); - const page = await context.newPage(); - - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); - - await context.close(); -});