[PB-985]: feature/playwright e2e tests

.github/workflows/playwright.yml

@@ -23,10 +23,13 @@ jobs:
       - run: echo "@internxt:registry=https://npm.pkg.github.com" >> .npmrc
       - run: echo //npm.pkg.github.com/:_authToken=${{ secrets.PERSONAL_ACCESS_TOKEN }} >> .npmrc
       - run: echo "always-auth=true" >> .npmrc
+      - run: echo REACT_APP_NODE_ENV=staging >> ./.env
       - name: Install dependencies
         run: npm install -g yarn && yarn
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
+      - name: Start dev server
+        run: yarn start & npx wait-on http://localhost:3000
       - name: Run Playwright tests
         run: yarn playwright test
       - uses: actions/upload-artifact@v4
@@ -35,3 +38,9 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-artifacts
+          path: test-results/
+          retention-days: 30

package.json

@@ -123,6 +123,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
+    "@faker-js/faker": "^9.0.0",
     "@internxt/eslint-config-internxt": "^1.0.3",
     "@internxt/prettier-config": "^1.0.1",
     "@playwright/test": "^1.44.1",

playwright.config.ts

@@ -1,16 +1,20 @@
 import { defineConfig, devices } from '@playwright/test';
-
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+import 'dotenv/config';
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './test/e2e',
+  expect: {
+    timeout: 4000,
+  },
+  timeout: 70000,
+
+  testDir: './test/e2e/tests/specs',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -24,27 +28,40 @@ 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',
+    screenshot: 'only-on-failure',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
+  outputDir: 'test-results',
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+      testDir: './test/e2e/tests/specs',
+    },
+    {
+      name: 'Internxt E2E tests on chromium',
+      testDir: './test/e2e/tests/specs',
+      use: { ...devices['Desktop Chrome'], storageState: './test/e2e/tests/specs/playwright/auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: 'Internxt E2E tests on firefox',
+      testDir: './test/e2e/tests/specs',
+      use: { ...devices['Desktop Firefox'], storageState: './test/e2e/tests/specs/playwright/auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'Internxt E2E tests on webkit',
+      testDir: './test/e2e/tests/specs',
+      use: { ...devices['Desktop Safari'], storageState: './test/e2e/tests/specs/playwright/auth/user.json' },
+      dependencies: ['setup'],
     },
 
     /* Test against mobile viewports. */
@@ -59,8 +76,14 @@ export default defineConfig({
 
     /* Test against branded browsers. */
     {
-      name: 'edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+      name: 'Internxt E2E tests on Edge',
+      testDir: './test/e2e/tests/specs',
+      use: {
+        ...devices['Desktop Edge'],
+        channel: 'msedge',
+        storageState: './test/e2e/tests/specs/playwright/auth/user.json',
+      },
+      dependencies: ['setup'],
     },
     // {
     //   name: 'Google Chrome',

src/app/banners/BannerManager.ts

@@ -1,8 +1,9 @@
+import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
+import envService from '../core/services/env.service';
 import localStorageService from '../core/services/local-storage.service';
 import { useAppSelector } from '../store/hooks';
 import { PlanState } from '../store/slices/plan';
 import { userSelectors } from '../store/slices/user';
-import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 
 const BANNER_NAME_IN_LOCAL_STORAGE = 'show_banner';
 const BANNER_NAME_FOR_FREE_USERS = 'show_free_users_banner';
@@ -48,7 +49,7 @@ export class BannerManager {
   }
 
   handleBannerDisplay(setShowBanner: (show: boolean) => void): void {
-    if (this.shouldShowBanner()) {
+    if (this.shouldShowBanner() && envService.isProduction()) {
       setTimeout(() => {
         setShowBanner(true);
       }, 5000);

src/app/drive/components/DriveExplorer/DriveExplorer.tsx

@@ -19,11 +19,14 @@ import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { useHotkeys } from 'react-hotkeys-hook';
 import moveItemsToTrash from 'use_cases/trash/move-items-to-trash';
 
+import { Button } from '@internxt/internxtui';
 import { Role } from '@internxt/sdk/dist/drive/share/types';
+import { getAncestorsAndSetNamePath } from 'app/store/slices/storage/storage.thunks/goToFolderThunk';
 import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
 import { t } from 'i18next';
 import BannerWrapper from '../../../banners/BannerWrapper';
 import deviceService from '../../../core/services/device.service';
+import envService from '../../../core/services/env.service';
 import errorService from '../../../core/services/error.service';
 import localStorageService, { STORAGE_KEYS } from '../../../core/services/local-storage.service';
 import navigationService from '../../../core/services/navigation.service';
@@ -38,7 +41,6 @@ import {
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
 import notificationsService, { ToastType } from '../../../notifications/services/notifications.service';
 import { AdvancedSharedItem } from '../../../share/types';
-import { Button } from '@internxt/internxtui';
 import { Tutorial } from '../../../shared/components/Tutorial/Tutorial';
 import { getSignUpSteps } from '../../../shared/components/Tutorial/signUpSteps';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
@@ -69,9 +71,9 @@ import WarningMessageWrapper from '../WarningMessage/WarningMessageWrapper';
 import './DriveExplorer.scss';
 import { DriveTopBarItems } from './DriveTopBarItems';
 import DriveTopBarActions from './components/DriveTopBarActions';
-import { getAncestorsAndSetNamePath } from 'app/store/slices/storage/storage.thunks/goToFolderThunk';
-import { IRoot } from '../../../store/slices/storage/types';
+
 import { useTrashPagination } from 'app/drive/hooks/trash/useTrashPagination';
+import { IRoot } from '../../../store/slices/storage/types';
 
 export const UPLOAD_ITEMS_LIMIT = 3000;
 
@@ -211,6 +213,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
   const divRef = useRef<HTMLDivElement | null>(null);
 
   const showTutorial =
+    envService.isProduction() &&
     useAppSelector(userSelectors.hasSignedToday) &&
     !isSignUpTutorialCompleted &&
     (showSecondTutorialStep || currentTutorialStep === 0);

test/e2e/tests/global.ts

@@ -0,0 +1,5 @@
+// global.ts
+export const userCredentials = {
+  email: '',
+  password: '',
+};

test/e2e/tests/helper/staticData.ts

@@ -0,0 +1,38 @@
+export const staticData = {
+  //CREDENTIALS
+  invalidPassword: 'invalid',
+  tooShortPassword: 'tes',
+  notComplexPassword: 'password',
+
+  //URLS
+  passwordRecoveryLinkURL: 'http://localhost:3000/recovery-link/',
+  signUpURL: 'http://localhost:3000/new',
+  driveURL: 'http://localhost:3000/',
+
+  //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: 'Invalid username or password',
+  dontHaveAccountText: 'Don\'t have an account?',
+  createAccountText: 'Create account',
+  termsAndConditionsLinkText: 'Terms and conditions',
+  youAcceptTermsLinkText: 'you accept the terms & conditions',
+  needHelpLinkText: 'Need help?',
+  driveTitle: 'Drive',
+  itemMovedToTrash: 'moved to trash',
+};