Isaiah/playwright tests

.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/

.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/

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)

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;

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",

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' },
+    // },
+  ],
+
+
+});

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>