diff --git a/package-lock.json b/package-lock.json index 51dc316..7c37892 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,27 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { + "@faker-js/faker": "^8.4.1", "@playwright/test": "^1.42.1", "@types/node": "^20.11.30" } }, + "node_modules/@faker-js/faker": { + "version": "8.4.1", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.4.1.tgz", + "integrity": "sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/fakerjs" + } + ], + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0", + "npm": ">=6.14.13" + } + }, "node_modules/@playwright/test": { "version": "1.42.1", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", diff --git a/package.json b/package.json index 7dad975..df82d93 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "license": "ISC", "type": "module", "devDependencies": { + "@faker-js/faker": "^8.4.1", "@playwright/test": "^1.42.1", "@types/node": "^20.11.30" } diff --git a/pageObjects/RegistrationPage.js b/pageObjects/RegistrationPage.js new file mode 100644 index 0000000..6060562 --- /dev/null +++ b/pageObjects/RegistrationPage.js @@ -0,0 +1,54 @@ +import { test, expect } from "@playwright/test"; + +export default class RegistrationPage { + constructor(page) { + this.page = page; + this.signupNameInput = '#signupName'; + this.signupLastNameInput = '#signupLastName'; + this.signupEmailInput = '#signupEmail'; + this.signupPasswordInput = '#signupPassword'; + this.signupRepeatPasswordInput = '#signupRepeatPassword'; + this.registerButton = 'text=Register'; + } + + async fillRegistrationForm(name, lastName, email, password) { + await this.page.fill(this.signupNameInput, name); + await this.page.fill(this.signupLastNameInput, lastName); + await this.page.fill(this.signupEmailInput, email); + await this.page.fill(this.signupPasswordInput, password); + await this.page.fill(this.signupRepeatPasswordInput, password); + } + + async triggerWarningMessagesForFields() { + await this.page.click(this.signupNameInput); + await this.page.click(this.signupLastNameInput); + await this.page.click(this.signupEmailInput); + await this.page.click(this.signupPasswordInput); + await this.page.click(this.signupRepeatPasswordInput); + await this.page.click(this.signupNameInput); + } + + async clickRegisterButton() { + await this.page.click(this.registerButton); + } + + + async validateRedBorder() { + await expect(this.page.locator(this.signupNameInput)).toHaveCSS('border-color', 'rgb(220, 53, 69)'); + await expect(this.page.locator(this.signupLastNameInput)).toHaveCSS('border-color', 'rgb(220, 53, 69)'); + await expect(this.page.locator(this.signupEmailInput)).toHaveCSS('border-color', 'rgb(220, 53, 69)'); + await expect(this.page.locator(this.signupPasswordInput)).toHaveCSS('border-color', 'rgb(220, 53, 69)'); + await expect(this.page.locator(this.signupRepeatPasswordInput)).toHaveCSS('border-color', 'rgb(220, 53, 69)'); + } + + async validateEmptyFieldsFeedback() { + await expect(this.page.locator(this.signupNameInput + ' + .invalid-feedback')).toBeVisible(); + await expect(this.page.locator(this.signupLastNameInput + ' + .invalid-feedback')).toBeVisible(); + await expect(this.page.locator(this.signupEmailInput + ' + .invalid-feedback')).toBeVisible(); + await expect(this.page.locator(this.signupPasswordInput + ' + .invalid-feedback')).toBeVisible(); + await expect(this.page.locator(this.signupRepeatPasswordInput + ' + .invalid-feedback')).toBeVisible(); + } + } + + // module.exports = RegistrationPage; + \ No newline at end of file diff --git a/playwright.config.js b/playwright.config.js index 67c6f48..ee4658c 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -25,7 +25,7 @@ const config = defineConfig({ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { headless: false, - baseURL: 'https://quato.forstudy.space/', + baseURL: 'https://qauto.forstudy.space/', httpCredentials:{ username: "guest", password: 'welcome2qauto' diff --git a/tests/example.spec.js b/tests/example.spec.js deleted file mode 100644 index 401acea..0000000 --- a/tests/example.spec.js +++ /dev/null @@ -1,52 +0,0 @@ -// @ts-check -import { test, expect } from "@playwright/test"; - -// test.describe("Suite name", () => { -// test.describe("Login", () => { -// test.beforeAll(async () => { -// console.log("BEFORE ALL"); -// }); - -// test.beforeEach(async () => { -// console.log("BEFORE EACH"); -// }); - -// test.afterEach(async () => { -// console.log("AFTER EACH"); -// }); - -// test.afterAll(async () => { -// console.log("AFTER ALL"); -// }); - -// test("test1", async ({ page }) => { -// console.log("test1"); -// }); - -// test("test2", async ({ page }) => { -// console.log("test2"); -// }); -// }); -// }); - -test.describe("TODO MVC", () => { - test.describe("TODO Create", () => { - test.beforeEach(async ({ page }) => { - await page.goto("https://demo.playwright.dev/todomvc"); - }); - - test("should allow me to add todo items", async ({ page }) => { - const todoText = "Learn Playwright"; - - await test.step("enter todo text and submit", async () => { - const newTodo = page.getByPlaceholder("What needs to be done?"); - await newTodo.fill(todoText); - await newTodo.press("Enter"); - }); - - await test.step("Check todo is created", async () => { - await expect(page.getByTestId("todo-title")).toHaveText([todoText]); - }); - }); - }); -}); diff --git a/tests/qauto/homework1.spec.js b/tests/qauto/homework1.spec.js new file mode 100644 index 0000000..cd2e437 --- /dev/null +++ b/tests/qauto/homework1.spec.js @@ -0,0 +1,219 @@ +import { test, expect } from "@playwright/test"; +import { faker } from '@faker-js/faker'; +import RegistrationPage from "../../pageObjects/RegistrationPage"; + + +test.describe('Registration form test', () => { + let registrationPage; + + test.beforeEach(async ({ page }) => { + await page.goto('/'); + await page.locator('.btn-primary').click(); + await expect(page.locator('.modal-content')).toBeVisible(); + registrationPage = new RegistrationPage(page); + }); + + test('Positive', async ({ page }) => { + const signupName = faker.person.firstName(); + const signupLastName = faker.person.lastName(); + const signupEmail = faker.internet.email(); + const signupPassword = faker.internet.password(); + + await registrationPage.fillRegistrationForm(signupName, signupLastName, signupEmail, signupPassword); + + const name = await page.locator('#signupName').evaluate(element => element.value); + expect(name).toBe(signupName); + + const lastName = await page.locator('#signupLastName').evaluate(element => element.value); + expect(lastName).toBe(signupLastName); + + const email = await page.locator('#signupEmail').evaluate(element => element.value); + expect(email).toBe(signupEmail); + + const passwordValue = await page.locator('#signupPassword').evaluate(element => element.value); + expect(passwordValue).toBe(signupPassword); + + await registrationPage.clickRegisterButton(); + await expect(page).toHaveURL('/panel/garage'); + }); + + test('Empty fields', async ({ page }) => { + // await registrationPage.clickRegisterButton(); + await registrationPage.triggerWarningMessagesForFields(); + await registrationPage.validateEmptyFieldsFeedback(); + }); + + test('Check red border', async ({ page }) => { + await registrationPage.triggerWarningMessagesForFields(); + await registrationPage.validateRedBorder(); + // await registrationPage.clickRegisterButton(); + // await registrationPage.validateRedBorder(); + }); +}); + +export {}; + + +// import { test, expect } from "@playwright/test"; +// import { faker } from '@faker-js/faker'; +// import RegistrationPage from "../../pageObjects/RegistrationPage"; // Adjust import path + +// test.describe('Registration form test', () => { +// let registrationPage; + +// test.beforeEach(async ({ page }) => { // Use 'page' provided as a parameter +// await page.goto('/'); +// await page.locator('.btn-primary').click(); +// await expect(page.locator('.modal-content')).toBeVisible(); +// registrationPage = new RegistrationPage(page); +// }); + +// test('Positive', async ({ page }) => { // Use 'page' provided as a parameter +// const signupName = faker.person.firstName(); +// const signupLastName = faker.person.lastName(); +// const signupEmail = faker.internet.email(); +// const signupPassword = faker.internet.password(); + +// await registrationPage.fillRegistrationForm(signupName, signupLastName, signupEmail, signupPassword); + +// const name = await page.locator('#signupName').evaluate(element => element.value); +// expect(name).toBe(signupName); + +// const lastName = await page.locator('#signupLastName').evaluate(element => element.value); +// expect(lastName).toBe(signupLastName); + +// const email = await page.locator('#signupEmail').evaluate(element => element.value); +// expect(email).toBe(signupEmail); + +// const passwordValue = await page.locator('#signupPassword').evaluate(element => element.value); +// expect(passwordValue).toBe(signupPassword); + +// await registrationPage.clickRegisterButton(); +// await expect(page).toHaveURL('/panel/garage'); +// }); +// }); + +// import { test, expect } from "@playwright/test"; +// import { faker } from '@faker-js/faker'; +// import RegistrationPage from "../../pageObjects/RegistrationPage"; + + +// test.describe('Registration form test', () => { +// let page; +// let registrationPage; + +// test.beforeEach(async ({ page }) => { +// await page.goto('/'); +// await page.locator('.btn-primary').click(); +// await expect(page.locator('.modal-content')).toBeVisible(); +// registrationPage = new RegistrationPage(page); +// }); + +// test('Positive', async () => { +// const signupName = faker.person.firstName(); +// const signupLastName = faker.person.lastName(); +// const signupEmail = faker.internet.email(); +// const signupPassword = faker.internet.password(); + +// await registrationPage.fillRegistrationForm(signupName, signupLastName, signupEmail, signupPassword); + +// const name = await page.locator('#signupName').evaluate(element => element.value); +// expect(name).toBe(signupName); + +// const lastName = await page.locator('#signupLastName').evaluate(element => element.value); +// expect(lastName).toBe(signupLastName); + +// const email = await page.locator('#signupEmail').evaluate(element => element.value); +// expect(email).toBe(signupEmail); + +// const passwordValue = await page.locator('#signupPassword').evaluate(element => element.value); +// expect(passwordValue).toBe(signupPassword); + +// await registrationPage.clickRegisterButton(); +// await expect(page).toHaveURL('/panel/garage'); +// }); + +// test('Empty fields', async () => { +// await registrationPage.clickRegisterButton(); +// await registrationPage.validateEmptyFieldsFeedback(); +// }); + +// test('Check red border', async () => { +// await registrationPage.validateRedBorder(); +// await registrationPage.clickRegisterButton(); +// await registrationPage.validateRedBorder(); +// }); +// }); + + +// const signupName = faker.person.firstName(); +// const signupLastName = faker.person.lastName(); +// const signupEmail = faker.internet.email(); +// const signupPassword = faker.internet.password(); + + +// test.describe('Registration form test', () => { + +// test.beforeEach(async ({page})=>{ +// await page.goto("/"); +// await page.locator(".btn-primary").click(); +// await expect(page.locator(".modal-content")).toBeVisible(); +// }) + +// test('Positive', async ({ page }) => { +// await page.locator("#signupName").fill(signupName); +// await page.locator("#signupLastName").fill(signupLastName); +// await page.locator("#signupEmail").fill(signupEmail); +// await page.locator("#signupPassword").fill(signupPassword); +// await page.locator("#signupRepeatPassword").fill(signupPassword); + + +// const name = await page.locator("#signupName").evaluate(element => element.value); +// expect(name).toBe(signupName); + +// const lastName = await page.locator("#signupLastName").evaluate(element => element.value); +// expect(lastName).toBe(signupLastName); + +// const email = await page.locator("#signupEmail").evaluate(element => element.value); +// expect(email).toBe(signupEmail); + +// const passwordValue = await page.locator("#signupPassword").evaluate(element => element.value); +// expect(passwordValue).toBe(signupPassword); + +// const passworRepeatdValue = await page.locator("#signupPassword").evaluate(element => element.value); +// expect(passworRepeatdValue).toBe(signupPassword); + +// await page.getByText("Register").click(); +// await expect(page).toHaveURL('/' + 'panel/garage') +// }); + +// test('Empty fields', async ({page})=>{ +// await page.locator("#signupName").click(); +// await page.locator("#signupLastName").click(); +// await expect(page.locator("#signupName + .invalid-feedback")).toBeVisible(); +// await page.locator("#signupEmail").click(); +// await expect(page.locator("#signupLastName + .invalid-feedback")).toBeVisible(); +// await page.locator("#signupPassword").click(); +// await expect(page.locator("#signupEmail + .invalid-feedback")).toBeVisible(); +// await page.locator("#signupRepeatPassword").click(); +// await expect(page.locator("#signupPassword + .invalid-feedback")).toBeVisible(); +// await page.getByText("Registration").click(); +// await expect(page.locator("#signupRepeatPassword + .invalid-feedback")).toBeVisible(); +// }) + +// test('Check red border', async ({ page }) => { +// await page.locator("#signupName").click(); +// await page.locator("#signupLastName").click(); +// await expect(page.locator("#signupName")).toHaveCSS('border-color', 'rgb(220, 53, 69)'); +// await page.locator("#signupEmail").click(); +// await expect(page.locator("#signupLastName")).toHaveCSS('border-color', 'rgb(220, 53, 69)'); +// await page.locator("#signupPassword").click(); +// await expect(page.locator("#signupEmail")).toHaveCSS('border-color', 'rgb(220, 53, 69)'); +// await page.locator("#signupRepeatPassword").click(); +// await expect(page.locator("#signupPassword")).toHaveCSS('border-color', 'rgb(220, 53, 69)'); +// await page.getByText("Registration").click(); +// await expect(page.locator("#signupRepeatPassword")).toHaveCSS('border-color', 'rgb(220, 53, 69)'); +// }); + +// }); +