Phase 3A – Set up & Implementation Iteration 1

[Anshra-dev]

Phase 3A – Week 3 & 4 Activities

Objective

Track implementation activities for Phase 3A, focusing on environment setup, initial development, and progress demonstration.

---

Tasks

• Set up the working environment and infrastructure

  • Configure all necessary tools, frameworks, and environments.
  • Validate setup for development and testing.

• Implement and test the first meaningful features or workflows

  • Begin coding core functionalities.
  • Perform initial testing to ensure correctness.

• Iterate on feedback and resolve implementation-level issues

  • Address bugs and refine workflows.
  • Apply improvements based on early feedback.

• Demonstrate progress through working modules or artefacts

  • Provide tangible outputs such as:
    • Code commits
    • Working screens
    • Prototypes

• Document identified challenges

  • Record technical hurdles and decisions for future reference.

---

Deliverables

• A working demonstration with artefacts:
  • Code commits
  • Configuration files
  • Database schema
  • Test cases
  • Design changes

[Anshra-dev]

Next Steps

• Division of responsibilities and detailed task assignments will be finalized during the daily Scrum call on 11/10.
• Updates will be documented in this issue after the call for transparency and tracking

[Anshra-dev]

@jashwanth004 @dakshita-singh @Vaishnavitiwari10

As discussed, let's start working on our respective branches.

Vaibhav Sharma (Project Lead/Backend Engineer)

• feature/dashboard-integration - connects React dashboard with backend API for displaying runs, reports, and metrics..
• feature/database-schema - defines PostgreSQL schema, entity relationships, migrations, and sample data setup.
• feature/backend-api - builds Node.js + Fastify REST API for tests, runs, artifacts, and reporting endpoints.

Dakshita Singh (Frontend / UI)

• feature/dashboard-ui — dashboard UI, components, styling (Tailwind / ShadCN)
• feature/visualizations — charts, trends (Recharts / Chart.js)
• feature/accessibility — axe-core fixes, ARIA, WCAG compliance

Vaishnavi Tiwari (Automation Engineer)

• feature/recorder — recorder Chrome extension (Manifest V3) and capture logic
• feature/script-generator — conversion of captured events to Playwright specs (script generation)
• feature/playwright-integration — test execution, assertions, visual-regression hooks

Saiyada Anshra Afzal (DevOps)

• feature/ci-cd — GitHub Actions workflows to run Playwright, generate reports
• feature/containerization — optional Docker files and container setup
• feature/report-publishing — Allure/HTML publishing steps and artifact management

Meruga Jashwanth Chopra (QA)

• feature/qa-validation — automated validation of generated tests, acceptance criteria
• feature/test-data — canonical test data sets (JSON/YAML) and regression suites
• feature/documentation — test plans, UAT guides, QA reports (can also be docs/* on dev)

[Vaishnavitiwari10]

@Vaibosnikov As discussed, Outline report have been shared and uploaded in Taxila portal.
@Anshra-dev , @dakshita-singh FYI,

Attached is the document for reference:
https://docs.google.com/document/d/1Mq-es2VxYB1q0U44Cd209XqfPZRrkGshUG6pmQZPGaI/edit?tab=t.0#heading=h.mwfw4z6nbhby

TESTCRAFT-OUTLINE REPORT.pdf

[Anshra-dev]

Week -3 Status Report on Branch: feature/ci-cd

---

Expected Outcome - Automate Playwright test execution in CI pipeline, generate HTML reports, and upload them as artifacts for easy access.

---

Action Taken

1. Created GitHub Actions workflow (ci.yml) as the first step.
2. Added basic steps: checkout code, setup Node.js, install dependencies, run tests.
3. Used Playwright’s default sample test locally to validate setup.
4. Added sample test in the repository under tests directory.
5. Encountered errors due to missing Playwright browsers in CI; added step npx playwright install --with-deps.
6. Updated workflow to run tests with custom config using --config=playwright/playwright.config.ts.
7. Configured Playwright reporter for HTML output:
   • Initially: reporter: 'html'
   • Updated: reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]]
8. Added artifact upload step for HTML report:
   • Initially pointed to test-results/
   • Corrected to playwright-report/
9. Faced issue where artifact upload failed because the report folder was missing.
10. Added fail-safe in workflow using if-no-files-found: ignore.
11. Verified tests run successfully in CI, but report upload issue still persists.

---

Outcomes Achieved

• CI pipeline runs successfully on push and pull requests.
• Playwright tests execute in GitHub Actions.
• HTML report generation configured in Playwright config.

---

Problems Identified

• Artifact upload step fails because playwright-report/ folder is not found after tests.
• Possible reasons: reporter not generating output in CI or tests not creating report folder.

---

Expected Resolution

• Validate report generation locally before next push.
• Ensure reporter configuration is correct and folder creation happens consistently.
• Add fail-safe in workflow to prevent job failure if report folder is missing.

---

Next Action Plan

• Check if playwright-report/ is generated and open with npx playwright show-report.
• Optimize workflow by adding node_modules caching for faster builds.
• Move to **feature/report-publishing** branch to implement publishing of reports externally (e.g., GitHub Pages or internal dashboard).
• Work on **feature/containerization** branch to create Docker image for consistent environment setup and portability.

---

Learnings

• YAML (YML) YAML stands for "YAML Ain't Markup Language." It is a human-readable data format often used for configuration files. In GitHub Actions, workflow files are written in YAML because it is simple, structured, and easy to parse.

• Checkout In GitHub Actions, actions/checkout is a step that pulls the repository code into the runner environment so the workflow can access files and run commands on them.

• Dependency A dependency is an external library or package that your project needs to function. For Node.js projects, dependencies are listed in package.json and installed using npm install.

• Node.js Node.js is a JavaScript runtime that allows running JavaScript outside the browser.
  When you install Node.js locally on your machine, it sets up the environment for development, but this installation does not get added to the repository. CI environments (like GitHub Actions) start fresh, so you must explicitly install Node.js in the workflow using actions/setup-node.

• Playwright (Detailed) Playwright is an end-to-end testing framework developed by Microsoft. It automates browsers like Chromium, Firefox, and WebKit.
  Key features:

  • Cross-browser testing.
  • Supports multiple languages (JavaScript, TypeScript, Python, etc.).
  • Provides advanced capabilities like screenshots, video recording, and trace debugging.
  • Requires browser binaries to run tests, which is why npx playwright install --with-deps is needed in CI.

• Reporter A reporter in Playwright defines how test results are presented. Common reporters include:

  • list (default): Shows results in the console.
  • html: Generates an interactive HTML report.
  • json: Outputs results in JSON format for programmatic use.

• Why HTML Report is Better HTML reports are preferred because:

  • They are human-readable and interactive.
  • Include screenshots, videos, and error traces for failed tests.
  • Easier for stakeholders to review compared to raw logs or JSON files.

• Fail-safe A fail-safe in CI workflows ensures that even if a step encounters an issue (like missing files), the workflow does not completely fail.
  Example in GitHub Actions:

  if-no-files-found: ignore