Task is done and waiting for review

cypress.config.js

@@ -2,6 +2,8 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
+    baseUrl: 'https://demoqa.com/webtables',
+
     setupNodeEvents(on, config) {
       // implement node event listeners here
     }

cypress/e2e/webTables.cy.js

@@ -1,7 +1,170 @@
 /// <reference types='cypress' />
 
+import WebTables from '../support/pageObjects/pages/webTables';
+import RegistrationForm from
+  '../support/pageObjects/components/registrationForm';
+import Pagination from '../support/pageObjects/components/pagination';
+import generateWorker from '../support/generateData';
+import workersData from '../support/fixtures/workersData.json';
+import titles from '../support/fixtures/titles.json';
+
+const webTables = new WebTables();
+const registrationForm = new RegistrationForm();
+const pagination = new Pagination();
+
 describe('Web Tables page', () => {
-  it('', () => {
+  beforeEach(() => {
+    cy.wrap(generateWorker()).as('workerData');
+
+    cy.wrap(generateWorker()).as('newWorker');
+
+    cy.visit('');
+  });
+
+  it('should allow to add a new worker', () => {
+    webTables.assertAddBtnExists(titles.addBtn)
+      .clickOnAddBtn();
+
+    cy.get('@workerData').then((workerData) => {
+      registrationForm
+        .assertFormExists(titles.registrationForm, titles.submitDataBtn)
+        .fillFormAndSubmit(workerData);
+
+      webTables.assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to delete a worker', () => {
+    cy.get('@workerData').then((workerData) => {
+      webTables.addWorker(workerData)
+        .assertWorkerDataInTable(workerData)
+        .deleteWorker(workerData)
+        .assertWorkerIsDeleted(workerData);
+    });
+  });
+
+  it('should allow to delete all workers', () => {
+    webTables.deleteAllWorkers()
+      .assertTableIsClear(titles.emptyTable);
+  });
+
+  it('should allow to find a worker by first name', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { firstName } = workerData;
+
+      webTables.addWorker(workerData)
+        .assertSearchFieldExists()
+        .searchForWorker(firstName)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to find a worker by last name', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { lastName } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(lastName)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to find a worker by age', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { age } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(age)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to find a worker by email', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { email } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(email)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to find a worker by salary', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { salary } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(salary)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to find a worker by department', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { department } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(department)
+        .assertWorkerDataInTable(workerData);
+    });
+  });
+
+  it('should allow to edit the found worker', () => {
+    cy.get('@workerData').then((workerData) => {
+      const { email } = workerData;
+
+      webTables.addWorker(workerData)
+        .searchForWorker(email)
+        .clickOnEditBtnOfParticularWorker(email);
+
+      registrationForm.assertFormContainsWorkerData(workerData);
+
+      const updatedFirstName = workerData.firstName + ' edited';
+      const updatedLastName = workerData.lastName + ' edited';
+
+      cy.get('@newWorker').then((newWorkerData) => {
+        registrationForm.editFormAndSubmit(newWorkerData);
+
+        webTables.clearSearchField()
+          .assertWorkerDataIsEdited(
+            updatedFirstName, updatedLastName, newWorkerData
+          );
+      });
+    });
+  });
+
+  it(`should allow to change the rows count selection of the table data`, () => {
+    const rowsCount = ['5', '10', '20', '25', '50', '100'];
+
+    webTables.assertRowsSelection(rowsCount);
+  });
+
+  it(`should allow to navigate to the next table pages by entering page number into the "Page input" field`, () => {
+    webTables.addMultipleWorkers(workersData);
+
+    pagination.selectRowsCount()
+      .navigateUntilLastPageByPageNumber();
+  });
+
+  it(`should allow to navigate to the previous table pages by entering page number into the "Page input" field`, () => {
+    webTables.addMultipleWorkers(workersData);
+
+    pagination.selectRowsCount()
+      .navigateUntilFirstPageByPageNumber();
+  });
+
+  it(`should allow to navigate to the next table pages by clicking on [Next]`, () => {
+    webTables.addMultipleWorkers(workersData);
+
+    pagination.selectRowsCount()
+      .navigateUntilLastPageByClickingOnNextBtn();
+  });
+
+  it(`should allow to navigate to the previous table pages by clicking on [Previous]`, () => {
+    webTables.addMultipleWorkers(workersData);
 
+    pagination.selectRowsCount()
+      .navigateToLastPage()
+      .navigateUntilFirstPageByClickingOnPreviousBtn();
   });
 });

cypress/support/commands.js

@@ -22,4 +22,8 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('getById', (selector) => {
+  cy.get(`#${selector}`);
+});

cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 Cypress.on('uncaught:exception', () => {
   return false;
@@ -31,4 +31,4 @@ if (!app.document.head.querySelector('[data-hide-command-log-request]')) {
 };
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

cypress/support/fixtures/titles.json

@@ -0,0 +1,6 @@
+{
+  "addBtn": "Add",
+  "registrationForm": "Registration Form",
+  "submitDataBtn": "Submit",
+  "emptyTable": "No rows found"
+}

cypress/support/fixtures/workersData.json

@@ -0,0 +1,26 @@
+[
+  {
+    "firstName": "Test1",
+    "lastName": "Customer1",
+    "email": "[email protected]",
+    "age": 35,
+    "salary": 2500,
+    "department": "Sales"
+  },
+  {
+    "firstName": "Test2",
+    "lastName": "Customer2",
+    "email": "[email protected]",
+    "age": 39,
+    "salary": 3500,
+    "department": "Finance"
+  },
+  {
+    "firstName": "Test3",
+    "lastName": "Customer3",
+    "email": "[email protected]",
+    "age": 40,
+    "salary": 5500,
+    "department": "Marketing"
+  }
+]

cypress/support/generateData.js

@@ -0,0 +1,22 @@
+import { faker } from '@faker-js/faker';
+
+function generateWorker() {
+  const gender = faker.helpers.arrayElement(['male', 'female']);
+  const firstName = faker.person.firstName(gender);
+  const lastName = faker.person.lastName(gender);
+  const email = faker.internet.email();
+  const age = faker.finance.amount({ min: 16, max: 60, dec: 0 });
+  const salary = faker.finance.amount({ min: 600, max: 100000, dec: 0 });
+  const department = faker.commerce.department();
+
+  return {
+    firstName,
+    lastName,
+    email,
+    age,
+    salary,
+    department
+  };
+}
+
+export default generateWorker;

cypress/support/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    getById(selector: string): Chainable<any>
+  }
+}