Isaiah/playwright tests (#537)

* setup PlayWright tests * Included more test cases * refactor: Updated documentation to include how to run Playwright tests * additonal updates to documentation * Added test coverage for navigation bar and project page * updated PlayWright config for a larger viewport size. And updated content-updates to include Playwright Recorder Signed-off-by: IsaiahA21 <[email protected]> * Tests that had to find image elements were based on style-components which will regenerated each time. \n Hence, added data-testid to PhotoGallery.tsx, Profile.tsx, FounderSection.styles.ts to images could be uniquely identified based on an id. Signed-off-by: IsaiahA21 <[email protected]> * memorized the testdataId for the profile image. Signed-off-by: IsaiahA21 <[email protected]> * Inside useMemo, forgot to include return * Add data-testid to ApplyButton component for unique identification * Added an env variable for testing, and a globalSetup configuration file for running tests. * modify playwright.config.ts to take the value passed from the GitHub Actions * Add Playwright test workflow for Vercel deployment Signed-off-by: IsaiahA21 <[email protected]> * Fix Playwright installation command in Vercel workflow * Add workers to playwright test commands and uploaded the test-reports Signed-off-by: IsaiahA21 <[email protected]> * Update Playwright test report upload action to use version 4 because v2 was deprecated * Refactor Apply Now button in ProjectsPage.tsx and test.ts files * Refactor Playwright test workflow for Vercel deployment * revert homepage test back * Update content-updates.md Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * run playwright test after merging main * ran playwright test after merging main * chore: Update team member LinkedIn profile link (#519) Signed-off-by: IsaiahA21 <[email protected]> * setup PlayWright tests Signed-off-by: IsaiahA21 <[email protected]> * Included more test cases Signed-off-by: IsaiahA21 <[email protected]> * refactor: Updated documentation to include how to run Playwright tests Signed-off-by: IsaiahA21 <[email protected]> * additonal updates to documentation Signed-off-by: IsaiahA21 <[email protected]> * Added test coverage for navigation bar and project page Signed-off-by: IsaiahA21 <[email protected]> * updated PlayWright config for a larger viewport size. And updated content-updates to include Playwright Recorder Signed-off-by: IsaiahA21 <[email protected]> * Tests that had to find image elements were based on style-components which will regenerated each time. \n Hence, added data-testid to PhotoGallery.tsx, Profile.tsx, FounderSection.styles.ts to images could be uniquely identified based on an id. Signed-off-by: IsaiahA21 <[email protected]> * memorized the testdataId for the profile image. Signed-off-by: IsaiahA21 <[email protected]> * Inside useMemo, forgot to include return Signed-off-by: IsaiahA21 <[email protected]> * Add data-testid to ApplyButton component for unique identification Signed-off-by: IsaiahA21 <[email protected]> * Added an env variable for testing, and a globalSetup configuration file for running tests. Signed-off-by: IsaiahA21 <[email protected]> * modify playwright.config.ts to take the value passed from the GitHub Actions Signed-off-by: IsaiahA21 <[email protected]> * Add Playwright test workflow for Vercel deployment Signed-off-by: IsaiahA21 <[email protected]> * Fix Playwright installation command in Vercel workflow Signed-off-by: IsaiahA21 <[email protected]> * Add workers to playwright test commands and uploaded the test-reports Signed-off-by: IsaiahA21 <[email protected]> * Update Playwright test report upload action to use version 4 because v2 was deprecated Signed-off-by: IsaiahA21 <[email protected]> * Refactor Apply Now button in ProjectsPage.tsx and test.ts files Signed-off-by: IsaiahA21 <[email protected]> * Refactor Playwright test workflow for Vercel deployment Signed-off-by: IsaiahA21 <[email protected]> * revert homepage test back Signed-off-by: IsaiahA21 <[email protected]> * Updated sponsor package link (#538) Signed-off-by: s-akella04 <[email protected]> Co-authored-by: s-akella04 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * Open Project Member applicaions for 24-25 year (#539) Signed-off-by: brian-ngyn <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * handling empty PM list (#533) * handling empty PM list * Update src/components/TeamSection/TeamInformation.ts Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: Morteza Faraji <[email protected]> --------- Signed-off-by: Morteza Faraji <[email protected]> Co-authored-by: Ben Schmidt <[email protected]> * Labib Co-VP Finance (#542) Signed-off-by: IsaiahA21 <[email protected]> * updating link to executive application (#544) Signed-off-by: IsaiahA21 <[email protected]> * 524 - initail changes, added Alumni tab, reusable components (#536) * 524 - initail changes, added Alumni tab, reusable components * 524-Adding back Slider to UI, addressing comments. Signed-off-by: Sukriti, Website Developer * Addressing comments - creating helper functions, fixing styles Signed-off-by: Sukritib13 <[email protected]> * addressing comments - using var for bg color, using type for readability Signed-off-by: Sukritib13 <[email protected]> * using types and correcting case Signed-off-by: Sukritib13 <[email protected]> * using memoization Signed-off-by: Sukritib13 <[email protected]> --------- Signed-off-by: Sukritib13 <[email protected]> Co-authored-by: brian nguyen <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * 2024-2025 PMs (#546) Signed-off-by: s-akella04 <[email protected]> Co-authored-by: s-akella04 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * updating team execs 2024-2025 (#547) Signed-off-by: Sukritib13 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * run playwright test after merging main Signed-off-by: IsaiahA21 <[email protected]> * Update content-updates.md Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * ran playwright test after merging main Signed-off-by: IsaiahA21 <[email protected]> * memorized the testdataId for the profile image. Signed-off-by: IsaiahA21 <[email protected]> * Inside useMemo, forgot to include return Signed-off-by: IsaiahA21 <[email protected]> * Add data-testid to ApplyButton component for unique identification Signed-off-by: IsaiahA21 <[email protected]> * Added an env variable for testing, and a globalSetup configuration file for running tests. Signed-off-by: IsaiahA21 <[email protected]> * modify playwright.config.ts to take the value passed from the GitHub Actions Signed-off-by: IsaiahA21 <[email protected]> * Add Playwright test workflow for Vercel deployment Signed-off-by: IsaiahA21 <[email protected]> * Fix Playwright installation command in Vercel workflow Signed-off-by: IsaiahA21 <[email protected]> * Add workers to playwright test commands and uploaded the test-reports Signed-off-by: IsaiahA21 <[email protected]> * Update Playwright test report upload action to use version 4 because v2 was deprecated Signed-off-by: IsaiahA21 <[email protected]> * Refactor Apply Now button in ProjectsPage.tsx and test.ts files Signed-off-by: IsaiahA21 <[email protected]> * Refactor Playwright test workflow for Vercel deployment Signed-off-by: IsaiahA21 <[email protected]> * revert homepage test back Signed-off-by: IsaiahA21 <[email protected]> * Updated sponsor package link (#538) Signed-off-by: s-akella04 <[email protected]> Co-authored-by: s-akella04 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * Open Project Member applicaions for 24-25 year (#539) Signed-off-by: brian-ngyn <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * handling empty PM list (#533) * handling empty PM list * Update src/components/TeamSection/TeamInformation.ts Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: Morteza Faraji <[email protected]> --------- Signed-off-by: Morteza Faraji <[email protected]> Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * Labib Co-VP Finance (#542) Signed-off-by: IsaiahA21 <[email protected]> * updating link to executive application (#544) Signed-off-by: IsaiahA21 <[email protected]> * 524 - initail changes, added Alumni tab, reusable components (#536) * 524 - initail changes, added Alumni tab, reusable components * 524-Adding back Slider to UI, addressing comments. Signed-off-by: Sukriti, Website Developer * Addressing comments - creating helper functions, fixing styles Signed-off-by: Sukritib13 <[email protected]> * addressing comments - using var for bg color, using type for readability Signed-off-by: Sukritib13 <[email protected]> * using types and correcting case Signed-off-by: Sukritib13 <[email protected]> * using memoization Signed-off-by: Sukritib13 <[email protected]> --------- Signed-off-by: Sukritib13 <[email protected]> Co-authored-by: brian nguyen <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * 2024-2025 PMs (#546) Signed-off-by: s-akella04 <[email protected]> Co-authored-by: s-akella04 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * updating team execs 2024-2025 (#547) Signed-off-by: Sukritib13 <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * run playwright test after merging main Signed-off-by: IsaiahA21 <[email protected]> * Update content-updates.md Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * ran playwright test after merging main Signed-off-by: IsaiahA21 <[email protected]> * setup PlayWright tests * refactor: Updated documentation to include how to run Playwright tests * additonal updates to documentation * Added test coverage for navigation bar and project page * updated PlayWright config for a larger viewport size. And updated content-updates to include Playwright Recorder Signed-off-by: IsaiahA21 <[email protected]> * Tests that had to find image elements were based on style-components which will regenerated each time. \n Hence, added data-testid to PhotoGallery.tsx, Profile.tsx, FounderSection.styles.ts to images could be uniquely identified based on an id. Signed-off-by: IsaiahA21 <[email protected]> * Refactor Apply Now button in ProjectsPage.tsx and test.ts files * Refactor Playwright test workflow for Vercel deployment * revert homepage test back Signed-off-by: IsaiahA21 <[email protected]> * Open Project Member applicaions for 24-25 year (#539) Signed-off-by: brian-ngyn <[email protected]> Signed-off-by: IsaiahA21 <[email protected]> * handling empty PM list (#533) * handling empty PM list * Update src/components/TeamSection/TeamInformation.ts Co-authored-by: Ben Schmidt <[email protected]> Signed-off-by: Morteza Faraji <[email protected]> --------- Signed-off-by: Morteza Faraji <[email protected]> Co-authored-by: Ben Schmidt <[email protected]> * Labib Co-VP Finance (#542) Signed-off-by: IsaiahA21 <[email protected]> * updating link to executive application (#544) Signed-off-by: IsaiahA21 <[email protected]> * 524 - initail changes, added Alumni tab, reusable components (#536) * 524 - initail changes, added Alumni tab, reusable components * 524-Adding back Slider to UI, addressing comments. Signed-off-by: Sukriti, Website Developer * Addressing comments - creating helper functions, fixing styles Signed-off-by: Sukritib13 <[email protected]> * addressing comments - using var for bg color, using type for readability Signed-off-by: Sukritib13 <[email protected]> * using types and correcting case Signed-off-by: Sukritib13 <[email protected]> * using memoization Signed-off-by: Sukritib13 <[email protected]> --------- Signed-off-by: Sukritib13 <[email protected]> Co-authored-by: brian nguyen <[email protected]> * run playwright test after merging main * ran playwright test after merging main Signed-off-by: IsaiahA21 <[email protected]> * Nov7PlaywrightChanges * Everything working as expected --------- Signed-off-by: IsaiahA21 <[email protected]> Signed-off-by: s-akella04 <[email protected]> Signed-off-by: brian-ngyn <[email protected]> Signed-off-by: Morteza Faraji <[email protected]> Signed-off-by: Sukritib13 <[email protected]> Co-authored-by: Ben Schmidt <[email protected]> Co-authored-by: Sahiti Akella <[email protected]> Co-authored-by: s-akella04 <[email protected]> Co-authored-by: brian nguyen <[email protected]> Co-authored-by: Morteza Faraji <[email protected]> Co-authored-by: Sukritib13 <[email protected]>
techstartucalgary · Nov 15, 2024 · c36fab4 · c36fab4
1 parent c713e3c
commit c36fab4
Show file tree

Hide file tree

Showing 19 changed files with 602 additions and 51 deletions.
diff --git a/.github/workflows/playwright_tests_on_vercel.yml b/.github/workflows/playwright_tests_on_vercel.yml
@@ -0,0 +1,29 @@
+on:
+  deployment_status:
+name: Playwright
+
+jobs:
+  run-end2endTests:
+    # Only run if the deployment was successful
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout the code from the repository
+      - uses: actions/checkout@v2
+
+      # Install project dependencies and Playwright (including browsers)
+      - name: Install dependencies
+        run: npm ci && npx playwright install --with-deps
+
+        # Run Playwright tests
+      - name: Run tests
+        run: npx playwright test --workers=4 --project=chromium
+        env:
+          BASE_URL: ${{github.event.deployment_status.environment_url}}
+
+      # Upload test result
+      - name: Upload Playwright test report
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-reports
+          path: playwright-reports/
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # VSCode workspaces
-*.code-workspace
+*.code-workspace
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/content-updates.md b/content-updates.md
@@ -23,6 +23,10 @@ This guide documents how and when to update different content on the Tech Start
     - [Applications](#applications)
   - [Resources Page](#resources-page)
     - [Guides](#guides)
+  - [Playwright Tests](#playwright-tests)
+    - [Installing Playwright](#installing-playwright)
+    - [How to run tests](#how-to-run-the-tests)
+    - [To view test results](#to-view-the-test-results)
 
 ## Homepage
 
@@ -31,15 +35,11 @@ This guide documents how and when to update different content on the Tech Start
 Statistics about our projects and members are set using the `NumberStat` component on the homepage:
 
 ```typescript
- <div className="homePage__numberContainer">
-            <NumberStat number={10} stat="projects so far" />
-            <NumberStat number={92} stat="members so far" />
-            <NumberStat
-              number={93}
-              suffix={"%"}
-              stat="enjoyed their involvement"
-            />
-          </div>
+<div className="homePage__numberContainer">
+  <NumberStat number={10} stat="projects so far" />
+  <NumberStat number={92} stat="members so far" />
+  <NumberStat number={93} suffix={"%"} stat="enjoyed their involvement" />
+</div>
 ```
 
 The `number` values must be updated at the end of each school year.
@@ -72,18 +72,21 @@ You can update our social media outlets via the `SocialMedia` component used in
 For example:
 
 ```typescript
-  <SocialMedia
-    color={SocialMediaColor.Gradient}
-    icon={faInstagram}
-    link="https://www.instagram.com/techstartucalgary/"
-  />
+<SocialMedia
+  color={SocialMediaColor.Gradient}
+  icon={faInstagram}
+  link="https://www.instagram.com/techstartucalgary/"
+/>
 ```
+
 ### Gallery
+
 Everything related to gallery can be found under [src/components/PhotoGallery](https://github.com/Tech-Start-UCalgary/tsu-website/tree/main/src/components/PhotoGallery)
 
 To Add a new picture visit [TechStart Google Photos Album](https://photos.app.goo.gl/SkVei5N56poqTh8g8)
- - Ask the administrator(s) for credential
- - click add new
+
+- Ask the administrator(s) for credential
+- click add new
 
 To make changes to the server, visit [tsuServer](https://github.com/techstartucalgary/tsuServer)
 
@@ -172,12 +175,11 @@ The team picture should be updated after each showcase, stored in [src/images](h
 
 Application status is managed through the `ApplySection` component used in `ApplyPage.tsx`.
 
-- When an application becomes open, set `statusIsOpen` to `true` and  `applicationLink` to the new application URL.
+- When an application becomes open, set `statusIsOpen` to `true` and `applicationLink` to the new application URL.
 - When an application becomes closed, set `statusIsOpen` to `false`.
 
 Example:
 
-
 ```typescript
 <ApplySection
     role="Project Member"
@@ -220,3 +222,77 @@ Example:
   description="Learn Django, a python-based web framework for building backends, APIs, multi-page applications, and more!"
 />
 ```
+
+## Playwright Tests
+
+### Installing Playwright
+
+Here are 2 helpful links to get you started with Playwright
+[Playwright Getting Started ](https://playwright.dev/docs/intro) Or [Getting Started with Playwright and VS Code](https://www.youtube.com/watch?v=Xz6lhEzgI5I).
+The second link is a video tutorial that will guide you through the process of setting up Playwright with VS Code, writing tests, and running them using the IDE.
+
+### How to run the tests using the terminal
+
+Ensure the tsu website is running locally on `localhost:3000`
+
+This will run all the tests in the tests folder
+
+```bash
+npx playwright test
+```
+
+This will run the test cases in the HomePage.test.ts file on the chromium browser
+
+```bash
+npx playwright test tests/homePage/HomePage.test.ts --project=chromium
+```
+
+### To view the test results
+
+Either navigate to the `playwright-report` folder and open the generated `report.html` file in the browser\
+or run the following command to open the report.html file in the browser
+
+```bash
+npx playwright show-report
+```
+
+### Create tests using Playwright Recorder
+
+You can either click "Record new" or use the terminal command `npx playwright codegen <url>` to generate test code for a specific URL and a specific viewport size.\
+For example, to generate test code for the Tech Start UCalgary website with a viewport size of 1600x900, run the following command:
+
+```bash
+npx playwright codegen --viewport-size=1600,900 https://techstartucalgary.com
+```
+
+=======
+
+### Installing Plawright
+
+Here are 2 helpful links to get you started with Plawright
+[Plawright Getting Started ](https://playwright.dev/docs/intro) Or [Getting Started with Playwright and VS Code](https://www.youtube.com/watch?v=Xz6lhEzgI5I)
+
+### How to run the tests
+
+This will run all the tests in the tests folder
+
+```bash
+npx playwright test
+```
+
+This will run the test cases in the HomePage.test.ts file on the chromium browser
+
+```bash
+npx playwright test tests/homePage/HomePage.test.ts --project=chromium
+```
+
+### To view the test results
+
+Either navigate to the `playwright-report` folder and open the generated `report.html` file in the browser\
+or run the following command to open the report.html file in the browser
+
+```bash
+npx playwright show-report
+```
+
+> > > > > > > b64dc11 (refactor: Updated documentation to include how to run Playwright tests)
diff --git a/global-setup.ts b/global-setup.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+/**
+ * globalSetup configuration file to set something up once before running all tests
+ */
+
+async function globalSetupFunc() {
+    dotenv.config({ path: path.resolve(__dirname, '.env.local') });
+    console.log("Running tests on environment:", process.env.STAGING === '1' ? "Local" : "Production");
+}
+export default globalSetupFunc;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.46.1",
     "@types/aos": "^3.0.4",
     "@types/express": "^4.17.17",
     "@types/jest": "^26.0.24",

diff --git a/playwright-reports/data/15adc907c0573549b991ed2bbef538463bbdf0ce.png b/playwright-reports/data/15adc907c0573549b991ed2bbef538463bbdf0ce.png
diff --git a/playwright-reports/index.html b/playwright-reports/index.html
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,81 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  globalSetup: require.resolve('./global-setup'),
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html', { outputFolder: 'playwright-reports', open: 'never' }],
+    ['list']],
+  /* 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: process.env.BASE_URL || 'http://localhost:3000',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1600, height: 900 }, // Simulating 90% zoom by using larger resolution
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        viewport: { width: 1600, height: 900 }, // Simulating 90% zoom by using larger resolution
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+        viewport: { width: 1600, height: 900 }, // Simulating 90% zoom by using larger resolution
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+
+});
diff --git a/src/components/ApplyButton.tsx b/src/components/ApplyButton.tsx
@@ -32,7 +32,7 @@ const ApplyButton = () => {
               <span>&#62;</span>
               <span>&#62;</span>{" "}
             </S.ApplyButtonArrow>
-            <S.ApplyButtonText> theTeam.join()</S.ApplyButtonText>
+            <S.ApplyButtonText data-testid="homePage_apply_btn"> theTeam.join()</S.ApplyButtonText>
           </S.ApplyButton>
         </S.ApplyButtonLink>
       </motion.div>