[PB-985]: feature/playwright e2e tests

.vscode/settings.json

@@ -3,8 +3,8 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
-      "source.fixAll.format": true
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.format": "explicit"
     },
     "svg.preview.background": "editor"
   }

playwright.config.ts

@@ -1,10 +1,10 @@
 import { defineConfig, devices } from '@playwright/test';
-
+import * as dotenv from 'dotenv';
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -24,7 +24,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'https://drive.internxt.com/login',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -33,18 +33,29 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+      testDir: './tests/specs',
+    },
+    {
+      name: 'Internxt E2E tests on chromium',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Chrome'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: 'Internxt E2E tests on firefox',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Firefox'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'Internxt E2E tests on webkit',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Safari'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     /* Test against mobile viewports. */

tests/helper/staticData.ts

@@ -0,0 +1,38 @@
+export const staticData = {
+  //CREDENTIALS
+  email: '[email protected]',
+  password: 'test123.',
+  invalidPassword: 'test1234.',
+  tooShortPassword: 'tes',
+  notComplexPassword: 'password',
+
+  //URLS
+  passwordRecoveryLink: 'https://drive.internxt.com/recovery-link/',
+  signUp: 'https://drive.internxt.com/new',
+  drive: 'https://drive.internxt.com/',
+
+  //SIGNUP DISCLAIMER
+  disclaimer:
+    'Internxt doesn’t store passwords. If you forget your password, you can download a backup key to regain access to your files. Learn more',
+
+  //PASSWORD WARNINGS
+  passwordNotLongEnough: 'Password has to be at least 8 characters long',
+  passwordNotComplex: 'Password is not complex enough',
+  passwordWeak: 'Password is weak',
+  passwordStrong: 'Password is strong',
+
+  //PAGE TITLES
+  termsOfServiceTitle: 'Terms of Service',
+  needHelpTitle: 'How can we help you?',
+  howToCreateBackUpKeyPageTitle: 'How do I create a backup key?',
+  logInPageTitle: 'Log in',
+
+  userAlreadyRegistered: 'already registered',
+  accountRecovery: 'Account recovery',
+  wrongLoginWarning: 'Wrong login credentials',
+  dontHaveAccountText: "Don't have an account?",
+  createAccountText: 'Create account',
+  termsAndConditions: 'Terms and conditions',
+  needHelpLinkText: 'Need help?',
+  driveTitle: 'Drive',
+};

tests/locators/accountRecoveryLocators.ts

@@ -0,0 +1,3 @@
+export const accountRecoveryLocators = {
+  accountRecoveryTitle: '[class$="space-y-5 p-8"] h1',
+};

tests/locators/driveLocators.ts

@@ -0,0 +1,3 @@
+export const driveLocators = {
+  driveTitle: '[title="Drive"]',
+};

tests/locators/howToCreateBackUpKeyLocators.ts

@@ -0,0 +1,3 @@
+export const howToCreateBackUpLocators = {
+  howToCreateBackUpTitle: '[class$="leading-10 text-body-primary-color"]',
+};

tests/locators/loginLocators.ts

@@ -0,0 +1,15 @@
+export const loginLocators = {
+  loginTitle: '[data-cy="loginTitle"]',
+  emailInput: '[data-cy="emailInput"]',
+  emailPlaceholder: '[placeholder="Correo electrónico"]',
+  passwordInput: '[data-cy="passwordInput"]',
+  passwordPlaceholder: '[placeholder="Contraseña"]',
+  loginButton: '[data-cy="loginButton"]',
+  loginButtonText: '[class="flex items-center justify-center space-x-2"]',
+  forgotPassword: '[class^="w-full cursor-pointer appearance-none text-center"]',
+  dontHaveAccountText: '[class="flex w-full items-center justify-center space-x-1.5 font-medium"] span',
+  createAccount: '[class="flex w-full items-center justify-center space-x-1.5 font-medium"] a',
+  termsAndConditions: '[class$="no-underline hover:text-gray-100"]:has-text("Terms and conditions")',
+  needHelp: '[class$="no-underline hover:text-gray-100"]:nth-child(2)',
+  wrongCredentials: '[class="flex flex-row items-start pt-1"] span',
+};

tests/locators/needHelpLocators.ts

@@ -0,0 +1,3 @@
+export const needHelpLocators = {
+  needHelpTitle: 'h1',
+};

tests/locators/signUpLocators.ts

@@ -0,0 +1,16 @@
+export const signUpLocators = {
+  createAccountTitle: '[class="text-3xl font-medium"]',
+  emailInput: 'input[id="email"]',
+  passwordInput: 'input[name="password"]',
+  passwordWarnings: '[class="pt-1"] p',
+  disclaimer: '[class="flex space-x-2.5 rounded-lg bg-primary/10 p-3 pr-4 dark:bg-primary/20"] p',
+  learnMoreLinkText: '[class="font-semibold text-primary underline"]',
+  createAccountButton: '[type="submit"]',
+  createAccountButtonText: '[class$="justify-center space-x-2"]',
+  byCreatingYourAccountText: '[class="mt-2 w-full text-xs text-gray-50"]',
+  dontHaveAccountText: '[class="flex w-full items-center justify-center space-x-1.5 font-medium"] span',
+  logIn: '[class$="hover:text-primary focus:text-primary-dark"]',
+  termsAndConditions: '[class$="no-underline hover:text-gray-100"]:has-text("Terms and conditions")',
+  needHelp: '[class$="no-underline hover:text-gray-100"]:nth-child(2)',
+  userAlreadyRegisteredText: '[class="font-base w-56 text-sm text-red"]',
+};

tests/locators/terms&conditionsLocators.ts

@@ -0,0 +1,3 @@
+export const termsAndConditionsLocators = {
+  termsOfService: '[class="mb-8 select-none text-6xl font-semibold text-white"]',
+};

tests/pages/basePage.ts

@@ -0,0 +1,24 @@
+import { Page, expect } from '@playwright/test';
+
+export class basePage {
+  protected readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async loadWeb(url: string) {
+    await this.page.goto(url);
+    await expect(this.page).toHaveURL(url);
+  }
+  async typeIn(selector: string, content: string) {
+    await this.page.locator(selector).fill(content);
+  }
+  async clickOn(selector: string) {
+    await this.page.locator(selector).click();
+  }
+
+  async assertText(actualText: string, expectedText: string) {
+    expect(actualText).toEqual(expectedText);
+  }
+}

tests/pages/loginPage.ts

@@ -0,0 +1,119 @@
+import { Page, Locator, expect } from '@playwright/test';
+import { basePage } from './basePage';
+import { loginLocators } from '../locators/loginLocators';
+import { driveLocators } from '../locators/driveLocators';
+import { signUpLocators } from '../locators/signUpLocators';
+import { accountRecoveryLocators } from '../locators/accountRecoveryLocators';
+import { termsAndConditionsLocators } from '../locators/terms&conditionsLocators';
+import { needHelpLocators } from '../locators/needHelpLocators';
+import { Context } from 'vm';
+
+export class loginPage extends basePage {
+  private loginTitle: Locator;
+  private emailInput: Locator;
+  private passwordInput: Locator;
+  private loginButton: Locator;
+  private loginButtonText: Locator;
+  private forgotPassword: Locator;
+  private dontHaveAccountText: Locator;
+  private createAccount: Locator;
+  private termsAndConditions: Locator;
+  private needHelp: Locator;
+  private wrongCredentials: Locator;
+  //drive
+  private driveTitle: Locator;
+  //accountRecovery
+  private accountRecoveryTitle: Locator;
+  //SignUp
+  private createAccounTitle: Locator;
+  //terms and conditions
+  private termsOfService: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.loginTitle = this.page.locator(loginLocators.loginTitle);
+    this.emailInput = this.page.locator(loginLocators.emailInput);
+    this.passwordInput = this.page.locator(loginLocators.passwordInput);
+    this.loginButtonText = this.page.locator(loginLocators.loginButtonText);
+    this.forgotPassword = this.page.locator(loginLocators.forgotPassword);
+    this.dontHaveAccountText = this.page.locator(loginLocators.dontHaveAccountText);
+    this.createAccount = this.page.locator(loginLocators.createAccount);
+    this.termsAndConditions = this.page.locator(loginLocators.termsAndConditions);
+    this.needHelp = this.page.locator(loginLocators.needHelp);
+    this.wrongCredentials = this.page.locator(loginLocators.wrongCredentials);
+    //drive
+    this.driveTitle = this.page.locator(driveLocators.driveTitle);
+    //account recovery
+    this.accountRecoveryTitle = this.page.locator(accountRecoveryLocators.accountRecoveryTitle);
+    //Sign Up
+    this.createAccounTitle = this.page.locator(signUpLocators.createAccountTitle);
+    // terms of service
+  }
+
+  async typeEmail(user: string | any) {
+    await this.loginTitle.waitFor({ state: 'visible' });
+    const emailPlaceholder = await this.emailInput.getAttribute('placeholder');
+    expect(emailPlaceholder).toEqual('Email');
+    await this.typeIn(loginLocators.emailInput, user);
+  }
+  async typePassword(password: string | any) {
+    const passPlaceholder = await this.passwordInput.getAttribute('placeholder');
+    expect(passPlaceholder).toEqual('Password');
+    await this.typeIn(loginLocators.passwordInput, password);
+  }
+  async clickLogIn(password: string | any) {
+    if (password === 'test123.') {
+      const loginButtonText = await this.loginButtonText.textContent();
+      expect(loginButtonText).toEqual('Log in');
+      await this.clickOn(loginLocators.loginButton);
+      await this.driveTitle.waitFor();
+      const driveTitle = await this.driveTitle.textContent();
+      return driveTitle;
+    } else {
+      await this.clickOn(loginLocators.loginButton);
+      await this.wrongCredentials.waitFor();
+      const wrongLoginText = await this.wrongCredentials.textContent();
+      return wrongLoginText;
+    }
+  }
+  async clickOnForgotYourPassword() {
+    await this.loginTitle.waitFor({ state: 'visible' });
+    this.clickOn(loginLocators.forgotPassword);
+    await this.accountRecoveryTitle.waitFor({ state: 'visible' });
+    const accountRecoveryText = await this.accountRecoveryTitle.textContent();
+    return accountRecoveryText;
+  }
+
+  async clickOnCreateAccount() {
+    await this.loginTitle.waitFor({ state: 'visible' });
+    const dontHaveAccountText = await this.dontHaveAccountText.textContent();
+    const createAccountText = await this.createAccount.textContent();
+    await this.clickOn(loginLocators.createAccount);
+    await this.createAccounTitle.waitFor({ state: 'visible' });
+    const createAccountTitle = await this.createAccounTitle.textContent();
+
+    return { dontHaveAccountText, createAccountText, createAccountTitle };
+  }
+
+  async clickOnTermsAndConditions(context: Context) {
+    const pagePromise = context.waitForEvent('page');
+    await this.termsAndConditions.waitFor({ state: 'visible' });
+    const termsAndConditionsText = await this.termsAndConditions.textContent();
+    await this.clickOn(loginLocators.termsAndConditions);
+
+    const newPage = await pagePromise;
+    const termsOfServiceTitle = await newPage.locator(termsAndConditionsLocators.termsOfService).textContent();
+    return { termsAndConditionsText, termsOfServiceTitle };
+  }
+
+  async clickOnNeedHelp(context: Context) {
+    const pagePromise = context.waitForEvent('page');
+    await this.needHelp.waitFor({ state: 'visible' });
+    const needHelpText = await this.needHelp.textContent();
+    await this.clickOn(loginLocators.needHelp);
+
+    const newPage = await pagePromise;
+    const needHelpPageTitle = await newPage.locator(needHelpLocators.needHelpTitle).textContent();
+    return { needHelpText, needHelpPageTitle };
+  }
+}

tests/pages/recoveryPasswordPage.ts

@@ -0,0 +1,13 @@
+import { Page, expect, Locator } from '@playwright/test';
+import { accountRecoveryLocators } from '../locators/accountRecovery';
+import { basePage } from './basePage';
+
+export class recoveryPasswordPage extends basePage {
+  private accountRecoveryTitle: Locator;
+
+  constructor(page: Page) {
+    super(page);
+
+    this.accountRecoveryTitle = this.page.locator(accountRecoveryLocators.accountRecoveryTitle);
+  }
+}