aa358 · Carlomos7 · Mar 8, 2023 · Mar 8, 2023 · Mar 9, 2023 · Mar 9, 2023
diff --git a/.github/workflows/playwright_video_lighthouse_report.yml b/.github/workflows/playwright_video_lighthouse_report.yml
@@ -0,0 +1,43 @@
+name: Run Playwright and Generate a video, screenshots, and LightHouse HTML Report
+
+on:
+  push:
+    branches: "*"
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "17.x"
+
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgbm-dev         
+          npm ci
+          npx playwright install chromium
+          npm install -g lighthouse chrome-launcher axe-core chromium wait-on
+
+      - name: Start the application
+        run: |
+          export DISPLAY=:1
+          npm run start & npx wait-on http://localhost:3000
+
+      - name: Run Playwright tests
+        run: npx playwright test --config=playwright.config.js
+
+      - name: Generate Lighthouse Report
+        run: |
+          lighthouse http://localhost:3000 --output html --output-path ./test-results/report.html --chrome-flags="--headless --no-sandbox --disable-gpu"
+      - name: Upload report, screenshots and videos of failed tests
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-results
+          path: ./test-results
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -9,14 +9,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '18.x'
       - name: Install dependencies
         run: npm ci
       - name: Install playwright browsers
         run: npx playwright install --with-deps
       - name: Run tests
-        run: npx playwright test
+        run: npx playwright test
diff --git a/playwright.config.js b/playwright.config.js
@@ -1,79 +1,50 @@
-// @ts-check
 const { defineConfig, devices } = require('@playwright/test')
+const path = require('path')
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * @see https://playwright.dev/docs/test-configuration
- */
 module.exports = defineConfig({
   testDir: './tests',
-  /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
     timeout: 5000
   },
-  /* 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',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  reporter: 'list',
   use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry'
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    screenshotPath: path.join(process.cwd(), 'screenshots'),
+    video: 'on',
+    videoSize: { width: 1920, height: 1080 },
+    videoPath: path.join(process.cwd(), 'videos')
   },
-
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] }
+      use: {
+        ...devices['Desktop Chrome'],
+        contextOptions: {
+          viewport: {
+            width: 1920,
+            height: 1080
+          },
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36',
+          acceptDownloads: true
+        },
+        launchOptions: {
+          headless: true,
+          args: [
+            '--disable-infobars',
+            '--disable-notifications',
+            '--disable-web-security'
+          ]
+        }
+      }
     }
-
-    /* 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: { channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { channel: 'chrome' },
-    // },
   ],
-
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm run start',
     port: 3000,

diff --git a/readme.md b/readme.md
@@ -41,7 +41,8 @@ Finally, use Playwright to create powerful and reliable automated tests for web
 1. [Part 1 - Getting Ready for Project 1](https://youtu.be/b60nwHeJjrQ)
 2. [Part 2 - Lean and Using ChatGPT for The Project ](https://youtu.be/EZMRNybUtUI)
 3. [Part 3 - Project Introduction](https://youtu.be/FkPZDFmGuys)
-4. TBD
+4. [Part 4 - Getting Ready for Project 2](https://youtu.be/ZiQIheh5xb4)
+5. [Part 4a - Playwright and LightHouse Action](https://youtu.be/JiIp0NxvHlU)
 
 # Project Setup
 ## I am giving you my code; howevever, you should replace what I did with your own work.  Feel free to choose another CSS framework; howevever, you must complete the project simulation's requirements. 

diff --git a/sprint_1_orientation.md b/sprint_1_orientation.md
@@ -1,16 +1,15 @@
-# Lean and Agile Principles for Empowering Teachers and Students in a Changing World: spoken by Founder and Ceo at new Employee Orientation
-As the founder of MyWebClass.org, I am thrilled to welcome all of you to our team. We are embarking on an exciting journey to revolutionize education by creating a community of people dedicated to helping students succeed in the modern software industry.
+# Capacity Planning and Technology Evaluation
+Introduction
+Welcome to MyWebClass.org, where we're all about revolutionizing education in the modern software industry. Our values include people, learning, efficiency, and dependability, and we're led by the visionary Keith Williams.
 
-Our mission is to provide educational opportunities and a practical, hands-on learning experience to students and teachers of all ages and backgrounds. We want to create a platform where everyone feels welcome to learn and grow, and we believe that our values are the key to achieving this mission.
+Testing
+We need to test everything from front-end frameworks to back-end servers to ensure our website can handle the traffic. We'll use tools like Playwright, Artillery, and Lighthouse for testing, and we'll test CSS frameworks for beauty and usability. We'll also test coding standards, accessibility, and user experience. With proper testing and planning, we can avoid disaster.
 
-At MyWebClass.org, we value people, learning, efficiency, and dependability. We understand that everyone has the potential to succeed, and we strive to create an inclusive and supportive environment where everyone feels included and valued. We believe that learning is a lifelong process, and we are committed to providing educational opportunities that help students and teachers gain experience with new technologies and learn advanced software engineering concepts. We recognize that time is a valuable resource, and we aim to provide a practical, hands-on learning experience that allows students and teachers to develop the skills they need to succeed in the modern software industry quickly. Finally, we understand the importance of being reliable and consistent, and we aim to provide a stable and dependable platform for students and teachers to learn and collaborate.
+Deployment and Instructions
+Our deployment process needs to be easy to follow, with clear instructions for local installation and various sized deployments for testing. We'll use Next.js for exploratory project testing for static pages.
 
-Our origin story began in 2023 when I, Keith Williams, founded MyWebClass.org. As a university lecturer with over 30 years of experience as a software engineer and entrepreneur, I saw the need to bridge the gap between educators and professionals in the software industry. I wanted to create a community of people committed to helping students of all ages and backgrounds succeed, and that's why I founded MyWebClass.org.
+Production Readiness
+We need to use automated testing and continuous integration to catch issues early, and a robust logging system to monitor performance. Alerts and external monitoring tools like ElasticSearch, Logstash, and Kibana will help us catch critical issues. We'll also need to develop a logging strategy to track application and server performance.
 
-Now, we are at the first milestone in the development of our company. We want to launch a site as quickly as possible, but we also want to ensure that we launch a product that reflects our mission, vision, and values. That's why we are asking you, our new employees, to form teams to develop competing prototypes of the MyWebClass.org site that will compete in a competition to become the A/B versions of the site that we will test with our first customers.
-
-We are making a customized learning management system that will enable us to deliver on our mission and values. However, to start, we need a site that will help us get the ball rolling. This site must embody our values and reflect our mission and vision.
-
-As we begin this competition, I want to remind you of the importance of our values. People, learning, efficiency, and dependability are the cornerstones of our company, and we must ensure that these values are reflected in everything we do.
-
-Thank you for joining us on this journey. Together, we can create a community of people committed to helping students of all ages and backgrounds succeed in the modern software industry. Let's get to work!
+Conclusion
+By taking all these factors into consideration, we can create a site that is performant, cost-effective, secure, scalable, and user-friendly. And most importantly, we can avoid the nightmare scenario of a crashed website and a penniless CEO wandering the streets of Newark muttering about node.js. With hard work and dedication, we can help students of all ages and backgrounds succeed in the modern software industry. Let's get to work!
diff --git a/task_table.md b/task_table.md
@@ -0,0 +1,37 @@
+# Team Member Task Tracker
+## Arqam Usman Ali
+| Task                                                                                                                          | Story Points | Comments           |
+| ----------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
+| Determine business requirements for internationalization                                                                      | 2            | Shared with Carlos |
+| Determine business requirements for SEO                                                                                       | 3            |                    |
+| Identify positive and negative tests to ensure SEO works as intended                                                          | 5            |                    |
+| Research and implement tools and technologies to support SEO                                                                  | 8            |                    |
+| Recommend SEO tools based on data and specific reasons                                                                        | 5            |                    |
+| Determine legal requirements for web accessibility                                                                            | 3            |                    |
+| Research GDPR compliance and Google Analytics Consent Mode                                                                    | 5            |                    |
+| Provide a privacy policy and confirmation modal for GDPR compliance                                                           | 5            |                    |
+| Total story points:                                                                                                           | 36           |                    |
+## Frank Xu
+| Task                                                                                                                          | Story Points | Comments           |
+| ----------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
+| Web Accessibility and Internationalization Research, Implementation, Testing, and Issue Resolutions                           | 8            |                    |
+| Implement and monitor DevOps pipeline using GitHub Actions                                                                    | 3            | Shared with Carlos |
+| Automatically test W3C validation, handicap accessibility, and JavaScript style                                               | 3            | Shared with Carlos |
+| Run CodeQL and ESLint using GitHub Actions                                                                                    | 5            |                    |
+| Measure build time, bundle size, code quality score, deployment time, developer environment setup time, and test running time | 8            |                    |
+| Development of Responsive Content Template and Homepage                                                                       | 3            | Shared with Carlos |
+| Testing and Quality Assurance                                                                                                 | 3            | Shared with Carlos |
+| Total story points:                                                                                                           | 33           |                    |
+## Carlos Segarra
+| Task                                                                                                                          | Story Points | Comments           |
+| ----------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
+| Determine business requirements for internationalization                                                                      | 2            | Shared with Arqam  |
+| Web Accessibility and Internationalization Research, Implementation, Testing, and Issue Resolutions                           | 8            |                    |
+| Implement and monitor DevOps pipeline using GitHub Actions                                                                    | 3            | Shared with Frank  |
+| Automatically test W3C validation, handicap accessibility, and JavaScript style                                               | 3            | Shared with Frank  |
+| Test and evaluate different node package managers (NPM, Yarn, etc.)                                                           | 5            |                    |
+| Test and evaluate build tools (Webpack, Veet, EsBuild)                                                                        | 5            |                    |
+| Generate Lighthouse Reports using Playwright                                                                                  | 5            |                    |
+| Development of Responsive Content Template and Homepage                                                                       | 3            |                    |
+| Testing and Quality Assurance                                                                                                 | 3            | Shared with Frank  |
+| Total story points:                                                                                                           | 37           |                    |