Reworking the framework from .js to .ts

cypress.config.js → cypress.config.ts

@@ -15,12 +15,12 @@ module.exports = defineConfig({
         viewportHeight: 1080,
         video: false,
         baseUrl: 'http://www.automationpractice.pl/',
-        loginAPIUrl: 'http://www.automationpractice.pl/index.php?controller=authentication',
-        account: {
-            userEmail: '[email protected]',
-            password: 'simple_automation_com_2021',
-            userName: 'John Wick'
-        },
+        env:{
+                userEmail: '[email protected]',
+                password: 'simple_automation_com_2021',
+                userName: 'John Wick',
+                loginAPIUrl: 'http://www.automationpractice.pl/index.php?controller=authentication',
+        }
     },
 });
 

cypress/e2e/logIn.cy.ts

@@ -0,0 +1,27 @@
+import Home from '../src/pages/Home';
+
+const homePage = new Home();
+
+describe('User Login  tests', () => {
+  it('Sign in page (Valid data)', () => {
+    homePage
+      .visit()
+      .checkPageUrl()
+      .header.clickOnSignInButton()
+      .alreadyRegisteredComponent
+      .enterUserEmail(Cypress.env('userEmail'))
+      .enterPassword(Cypress.env('password'))
+      .clickOnLoginButton()
+      .checkPageUrl()
+      .checkTextIsPresent('Welcome to your account. Here you can manage all of your personal information and orders.')
+      .header.checkUserNameIsPresent(Cypress.env('userName'));
+  });
+
+  it('Log In via API (Valid data)', () => {
+    cy.logInApi(Cypress.env('userEmail'), Cypress.env('password'))
+    homePage
+      .visit()
+      .checkPageUrl()
+      .header.checkUserNameIsPresent(Cypress.env('userName'));
+  });
+});

cypress/e2e/navigation.cy.ts

@@ -0,0 +1,32 @@
+import Home from '../src/pages/Home';
+
+const homePage = new Home();
+
+describe('Navigation tests', () => {
+  it('Navigate to the Home page, and verify url', () => {
+    homePage.visit().checkPageUrl();
+  });
+
+  it('Navigate to the Contact Us page via header, and verify url', () => {
+    homePage
+      .visit()
+      .checkPageUrl()
+      .header.clickOnContactUsButton()
+      .checkPageUrl();
+  });
+
+  it('Navigate to the Sign In page via header, and verify url', () => {
+    homePage
+      .visit()
+      .checkPageUrl()
+      .header.clickOnSignInButton()
+      .checkPageUrl();
+  });
+
+  it('Check links on Follow us section in footer', () => {
+    homePage
+      .visit()
+      .checkPageUrl()
+      .footer.checkFollowUsSectionLinks();
+  });
+});

cypress/e2e/products.cy.ts

@@ -0,0 +1,16 @@
+import Home from '../src/pages/Home';
+
+const homePage = new Home();
+
+describe('Check product on site', () => {
+  it('Check item discount', () => {
+    homePage
+      .visit()
+      .checkPageUrl()
+      .productList
+      .clickOnBestSellersBtn()
+      .openQuickViewModalForFirstProductWithPriceDiscount()
+      .waitForLoad()
+      .checkSumWithDiscountCalculatedCorrectly();
+  });
+});

cypress/src/base/BasePage.ts

@@ -0,0 +1,12 @@
+export default class BasePage {
+  private url: string;
+
+  constructor(url: string) {
+    this.url = url;
+  }
+
+  public checkPageUrl(): this {
+    cy.url().should('eq', `${Cypress.config('baseUrl')}${this.url}`);
+    return this;
+  }
+}

cypress/src/components/AlreadyRegistered.ts

@@ -0,0 +1,41 @@
+import Account from '../pages/Account';
+
+export default class AlreadyRegistered {
+  private alreadyRegisteredContainerLocator: string = '#login_form';
+  private loginFieldLocator: string = '#email';
+  private passwordFieldLocator: string = '#passwd';
+  private loginButtonLocator: string = '#SubmitLogin';
+
+  private get inputEmailField(): Cypress.Chainable {
+    return cy
+      .get(this.alreadyRegisteredContainerLocator)
+      .find(this.loginFieldLocator);
+  }
+
+  private get inputPasswordField(): Cypress.Chainable {
+    return cy
+      .get(this.alreadyRegisteredContainerLocator)
+      .find(this.passwordFieldLocator);
+  }
+
+  private get loginButton(): Cypress.Chainable {
+    return cy
+      .get(this.alreadyRegisteredContainerLocator)
+      .find(this.loginButtonLocator);
+  }
+
+  public enterUserEmail(userEmail: any): this {
+    this.inputEmailField.type(userEmail);
+    return this;
+  }
+
+  public enterPassword(password: string): this {
+    this.inputPasswordField.type(password);
+    return this;
+  }
+
+  public clickOnLoginButton(): Account {
+    this.loginButton.click();
+    return new Account();
+  }
+}

cypress/src/components/Footer.ts

@@ -0,0 +1,25 @@
+export default class Footer {
+  private footerContainerLocator: string = '#footer';
+
+  private get followUsSectionLinksList(): Cypress.Chainable {
+    return cy.get(this.footerContainerLocator).find('#social_block a');
+  }
+
+  public checkFollowUsSectionLinks(): void {
+    this.followUsSectionLinksList.each((element) => {
+      cy.request({
+        method: 'GET',
+        url: element.attr('href'),
+        failOnStatusCode: false,
+      }).then((response) => {
+        if (response.status === 200) {
+          expect(response.status).eq(200);
+        } else if (response.status === 404) {
+          expect(response.status).eq(404);
+        } else {
+          console.log(`${element.attr('href')}${response.status}`);
+        }
+      });
+    });
+  }
+}

cypress/src/components/Header.js → cypress/src/components/Header.ts

@@ -2,28 +2,32 @@ import ContactUs from '../pages/ContactUs';
 import SignIn from '../pages/SignIn';
 
 export default class Header {
-  headerContainerLocator = '#header';
-  nameAccountLocator = '.account';
+  private headerContainerLocator: string = '#header';
+  private nameAccountLocator: string = '.account';
 
-  get contactUsButton() {
+  private get contactUsButton(): Cypress.Chainable {
     return cy.get(this.headerContainerLocator).contains('a', 'Contact us');
   }
-  get signInButton() {
+
+  private get signInButton(): Cypress.Chainable {
     return cy.get(this.headerContainerLocator).contains('a', 'Sign in');
   }
-  get nameAccount() {
+
+  private get nameAccount(): Cypress.Chainable {
     return cy.get(this.nameAccountLocator);
   }
 
-  clickOnContactUsButton() {
+  public clickOnContactUsButton(): ContactUs {
     this.contactUsButton.click();
     return new ContactUs();
   }
-  clickOnSignInButton() {
+
+  public clickOnSignInButton(): SignIn {
     this.signInButton.click();
     return new SignIn();
   }
-  checkUserNameIsPresent(userName) {
+
+  public checkUserNameIsPresent(userName: string): this {
     this.nameAccount.contains(userName);
     return this;
   }