From 5b06c0a83afb23db0959d3df89e8ca69bd6ce1cd Mon Sep 17 00:00:00 2001 From: Narine <156703697+narinegi@users.noreply.github.com> Date: Wed, 8 May 2024 20:45:42 +0100 Subject: [PATCH] Add files via upload --- LoginPage.js | 40 ++++++++++++++++++++ SmartTablePage.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++ commands.js | 51 ++++++++++++++++++++++++++ login.spec.js | 49 +++++++++++++++++++++++++ smartTable.spec.js | 32 ++++++++++++++++ 5 files changed, 263 insertions(+) create mode 100644 LoginPage.js create mode 100644 SmartTablePage.js create mode 100644 commands.js create mode 100644 login.spec.js create mode 100644 smartTable.spec.js diff --git a/LoginPage.js b/LoginPage.js new file mode 100644 index 0000000..d6113e4 --- /dev/null +++ b/LoginPage.js @@ -0,0 +1,40 @@ +export default class LoginPage { + _loginUrl = '/auth/login'; + _dashboardUrl = '/pages/dashboard'; + _emailSelector = 'input[id=input-email]'; + _passwordSelector = 'input[id=input-password]'; + _checkboxSelector = 'span.custom-checkbox'; + _checkedIconSelector = 'nb-icon.custom-checkbox-icon'; + _loginButtonSelector = 'button'; + _dashboardContentSelector = 'div.content'; + + navigateLogin() { + cy.visit(this._loginUrl); + } + navigateDashboard() { + cy.url().should('include', this._dashboardUrl); + } + fillIn({email, password}) { + this.emailInput.type(email); + this.passwordInput.type(password); + } + get emailInput() { + return cy.get(this._emailSelector); + } + get passwordInput() { + return cy.get(this._passwordSelector); + } + get checkboxInput() { + return cy.get(this._checkboxSelector); + } + get checkedIcon() { + return cy.get(this._checkedIconSelector); + } + get dashboard() { + return cy.get(this._dashboardContentSelector); + } + get loginButton() { + return cy.get(this._loginButtonSelector); + } + +} \ No newline at end of file diff --git a/SmartTablePage.js b/SmartTablePage.js new file mode 100644 index 0000000..af8912d --- /dev/null +++ b/SmartTablePage.js @@ -0,0 +1,91 @@ +export default class SmartTablePage { + _url = '/pages/tables/smart-table'; + _addButtonSelector = 'th[ng2-st-add-button] a.ng2-smart-action'; + _newRowSelector = 'tr[ng2-st-thead-form-row]'; + _newCellSelector = 'thead ng2-smart-table-cell'; + _saveButtonSelector = 'thead ng2-st-actions a.ng2-smart-action-add-create'; + _addedRowSelector = 'tbody tr.selected'; + _addedCellSelector = 'div.ng-star-inserted'; + _chosenRowSelector = 'tbody tr'; + _chosenCellSelector = 'td:not(.ng2-smart-actions)'; + _editButtonSelector = 'a.ng2-smart-action-edit-edit'; + _editSaveButtonSelector = 'a.ng2-smart-action-edit-save'; + + navigate() { + cy.visit(this._url); + } + + enterInputValues(inputValues) { + inputValues.forEach((value, index) => { + this.newCells.eq(index).type(value); + }); + } + + verifyNewlyCreatedUser(inputValues) { + this.newlyAddedRow.each(($value, index) => { + const value = $value.text().trim(); + const expectedValue = inputValues[index]; + expect(value).to.equal(expectedValue); + }); + } + + editExistingUser(updateValues) { + updateValues.forEach((value, index) => { + this.chosenCells.eq(index).type('{backspace}').type(value); + }); + } + + verifyEditedUser(updateValues) { + const existingValues = []; + this.chosenCells.each(($cell) => { + cy.wrap($cell).invoke('text').then(text => { + existingValues.push(text.trim()); + }); + }); + this.editedRow.each(($value, index) => { + const value = $value.text().trim(); + const expectedValue = existingValues[index]; + expect(value).to.equal(expectedValue); + }); + } + + get addButton() { + return cy.get(this._addButtonSelector); + } + + get newRow() { + return cy.get(this._newRowSelector); + } + + get newCells() { + return cy.get(this._newCellSelector); + } + + get saveButton() { + return cy.get(this._saveButtonSelector); + } + + get newlyAddedRow() { + return cy.get(this._addedRowSelector).find(this._addedCellSelector); + } + + get chosenRow() { + return cy.get(this._chosenRowSelector).first(); + } + + get chosenCells() { + return cy.get(this._chosenCellSelector); + } + + get editButton() { + return cy.get(this._editButtonSelector); + } + + get editSaveButton() { + return cy.get(this._editSaveButtonSelector); + } + + get editedRow() { + return cy.get(this._chosenRowSelector).first().find(this._chosenCellSelector); + } +} diff --git a/commands.js b/commands.js new file mode 100644 index 0000000..33338d7 --- /dev/null +++ b/commands.js @@ -0,0 +1,51 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +declare global { +// namespace Cypress { namespace Cypress { +// interface Chainable { interface Chainable { +// login(email: string, password: string): Chainable login(email: string, password: string): Chainable +// drag(subject: string, options?: Partial): Chainable drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } } +// } } +// } } + + Cypress.Commands.add('fillLoginForm', ({email, password}) => { + cy.get('input[id=input-email]').type(email); + cy.get('input[id=input-password]').type(password) + }); + + Cypress.Commands.add('setLoginCheckbox', () => { + cy.get('span.custom-checkbox') + .click() + .find('nb-icon.custom-checkbox-icon') + .should('be.visible').and('exist') + }); + + Cypress.Commands.add('getLoginButton', () => { + cy.get('button').contains('Log In') + }) \ No newline at end of file diff --git a/login.spec.js b/login.spec.js new file mode 100644 index 0000000..d9e81dc --- /dev/null +++ b/login.spec.js @@ -0,0 +1,49 @@ +import LoginPage from '../../pageObjects/LoginPage.js'; + +describe("Login with Page Object Model", () => { + const loginPage = new LoginPage(); + + beforeEach(() =>{ + loginPage.navigateToLogin(); + }) + + it('should successfully login', () => { + const userData = { + email: 'narineilnytska@gmail.com', + password: 'TestNG@001' + } + + loginPage.getLoginButton().contains('Log In').should('be.disabled'); + loginPage.fillInLoginForm(userData); + loginPage.getLoginButton().contains('Log In').should('be.enabled'); + loginPage.toggleCheckbox(); + loginPage.getCheckedIcon().should('be.visible').and('exist'); + loginPage.getLoginButton().contains('Log In').click(); + cy.wait(5000); + loginPage.navigateToDashboard(); + loginPage.getDashboard().should('be.visible'); + }) +}); + +describe("Login with Custom Commands", () => { + + beforeEach(() =>{ + cy.visit('auth/login'); + }) + + it('should successfully login', () => { + const userData = { + email: 'narineilnytska@gmail.com', + password: 'TestNG@001' + } + + cy.getLoginButton().should('be.disabled'); + cy.fillLoginForm(userData); + cy.getLoginButton().should('be.enabled'); + cy.setLoginCheckbox(); + cy.getLoginButton().click(); + cy.wait(5000); + cy.url().should('include', '/pages/dashboard'); + cy.get('div.content').should('be.visible'); + }) +}) \ No newline at end of file diff --git a/smartTable.spec.js b/smartTable.spec.js new file mode 100644 index 0000000..cd494b4 --- /dev/null +++ b/smartTable.spec.js @@ -0,0 +1,32 @@ +import SmartTablePage from '../../pageObjects/SmartTablePage.js'; + +describe("Smart Table", () => { + const smartTablePage = new SmartTablePage(); + + beforeEach(() =>{ + smartTablePage.navigateToSmartTable(); + }) + + it('should create a new user', () => { + smartTablePage.getAddButton().click(); + smartTablePage.getNewRow().should('exist').and('be.visible'); + + const inputValues = ['700', 'Emma', 'Tom', 'Tommy', 'emmat@gmail.com', '33']; + smartTablePage.enterInputValues(inputValues); + smartTablePage.getSaveButton().click(); + + smartTablePage.verifyNewlyCreatedUser(inputValues); + }); + + it('should edit a user', () => { + const updateValues = ['007', 'Test', 'est', 'Te', 'e', '1']; + + smartTablePage.getChosenRow().within(() => { + smartTablePage.getEditButton().click(); + smartTablePage.editExistingUser(updateValues); + smartTablePage.getEditSaveButton().click(); + }); + + smartTablePage.verifyEditedUser(updateValues); + }); +}) \ No newline at end of file