🐞 fix: Fix encoding of URLs in test links

- Commented out console log in the home route to reduce clutter in logs.
- Updated formatting and consistency in the sites route, including removing unused domain fetching functionality.
- Added form action to the add-form view for submitting new sites, ensuring the input field is properly named for backend processing.

.github/workflows/todos.yml

@@ -0,0 +1,26 @@
+name: Sync TODOs with Issues
+
+on:
+  workflow_dispatch:
+  push:
+    paths-ignore:
+      - '**.md'
+
+jobs:
+  sync_todos:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Sync TODOs
+        uses: Solo-Web-Works/TODO-Sync@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          summary_file: TODO_SUMMARY.md
+          dry_run: false
+          commit: false

app.js

@@ -4,8 +4,10 @@ const path = require('path');
 const cookieParser = require('cookie-parser');
 const logger = require('morgan');
 
-const indexRouter = require('./routes/index');
-const usersRouter = require('./routes/users');
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+const apiRouter = require('./routes/api');
+const sitesRouter = require('./routes/sites');
 
 const app = express();
 
@@ -20,8 +22,13 @@ app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
+/**
+ * Register routers for different routes
+ */
 app.use('/', indexRouter);
+app.use('/api', apiRouter);
 app.use('/users', usersRouter);
+app.use('/sites', sitesRouter);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

auth.js

@@ -0,0 +1,8 @@
+const { createClient } = require('@supabase/supabase-js');
+
+const supabase = createClient(
+    'https://rwulmnzzmieuosakijoe.supabase.co',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJ3dWxtbnp6bWlldW9zYWtpam9lIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDgwNTQ4NDEsImV4cCI6MjA2MzYzMDg0MX0.ZEBJ6v0-u77z1cqRJvA8WOcGRxd8fcN0vqeYJNQgd_U'
+);
+
+module.exports.supabase = supabase;

helpers/axe-test.js

@@ -0,0 +1,17 @@
+const base = require('@playwright/test');
+const AxeBuilder = require('@axe-core/playwright').default;
+
+// Extend base test by providing "makeAxeBuilder"
+//
+// This new "test" can be used in multiple test files, and each of them will get
+// a consistently configured AxeBuilder instance.
+exports.test = base.test.extend({
+  makeAxeBuilder: async ({ page }, use) => {
+    const makeAxeBuilder = () => new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+        .exclude('#commonly-reused-element-with-known-issue');
+
+    await use(makeAxeBuilder);
+  }
+});
+exports.expect = base.expect;

helpers/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Utility functions for the application.
+ */
+
+const isValidDomain = (domain) => {
+  // Regular expression to validate a domain name
+  // const domainRegex = /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
+
+  // Regular expression to validate a domain name.  Requires http or https prefix.
+  // Allows for optional path after the domain.
+  const domainRegex = /^https?:\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?\/?$/;
+  return domainRegex.test(domain);
+}
+
+module.exports = {
+  isValidDomain
+};

models/SiteModel.js

@@ -0,0 +1,103 @@
+/**
+ * Model for managing sites table in the database.
+ */
+
+const { supabase } = require('../auth');
+const { isValidDomain } = require('../helpers/utils');
+
+class SiteModel {
+
+    static tableName = 'sites';
+
+    /**
+     * Inserts a new site into the database.
+     *
+     * @param {string} domainName - The domain name of the site.
+     *
+     * @returns {Promise<Object>} - The result of the insert operation.
+     */
+    async insert(domainName) {
+        // validate inputs
+        if (!domainName) {
+            throw new Error('Domain name is required to insert a site.');
+        }
+
+        // validate domain name format
+        if (!isValidDomain(domainName)) {
+            throw new Error('Invalid domain name format.');
+        }
+
+        // check if the domain name already exists
+        if (await this.getByDomainName(domainName).then(data => data.length !== 0)) {
+            throw new Error('Domain name already exists.');
+        }
+
+        const { data, error } = await supabase.from(SiteModel.tableName).insert({
+            domain_name: domainName,
+        }).select();
+
+        if (error) {
+            console.error('Error inserting site:', error);
+            throw error;
+        }
+
+        return data;
+    }
+
+    /**
+     * Retrieves all sites from the database.
+     *
+     * @returns {Promise<Array>} - An array of site objects.
+     */
+    async getAll() {
+        const { data, error } = await supabase.from(SiteModel.tableName).select('*');
+
+        if (error) {
+            console.error('Error fetching sites:', error);
+            throw error;
+        }
+
+        data.reverse(); // Reverse the order to show the most recent sites first
+
+        return data;
+    }
+
+    /**
+     * Retrieves a site by its ID.
+     *
+     * @param {number} id - The ID of the site.
+     *
+     * @returns {Promise<Object>} - The site object.
+     */
+    async getById(id) {
+        const { data, error } = await supabase.from(SiteModel.tableName).select('*').eq('id', id).single();
+
+        if (error) {
+            console.error('Error fetching site by ID:', error);
+            throw error;
+        }
+
+        return data;
+    }
+
+    /**
+     * Retrieves a site by its domain name.
+     *
+     * @param {string} domainName - The domain name of the site.
+     *
+     * @returns {Promise<Object>} - The site object.
+     */
+    async getByDomainName(domainName) {
+        const { data, error } = await supabase.from(SiteModel.tableName).select('*').eq('domain_name', domainName);
+
+        if (error) {
+            console.error('Error fetching site by domain name:', error);
+            throw error;
+        }
+
+        return data;
+    }
+
+}
+
+module.exports = SiteModel;

package.json

@@ -9,17 +9,23 @@
     "build:css": "tailwindcss -i ./styles/base.css -o ./public/stylesheets/style.css --minify"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.10.1",
+    "@playwright/test": "^1.52.0",
+    "@supabase/supabase-js": "^2.49.8",
+    "axe-playwright": "^2.1.0",
     "cookie-parser": "~1.4.4",
     "debug": "~2.6.9",
     "ejs": "^3.1.10",
     "express": "~4.16.1",
     "http-errors": "~1.6.3",
+    "jsdom": "^26.1.0",
     "morgan": "~1.9.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.7",
     "@tailwindcss/typography": "^0.5.16",
-    "tailwindcss": "^4.1.7",
-    "concurrently": "^8.2.0"
+    "concurrently": "^8.2.0",
+    "daisyui": "^5.0.37",
+    "tailwindcss": "^4.1.7"
   }
 }

public/favicon.ico

@@ -0,0 +1 @@
+

routes/api.js

@@ -0,0 +1,27 @@
+// import router from express
+var express = require('express');
+const PlaywrightService = require('../services/PlaywrightService');
+var router = express.Router();
+
+/**
+ * GET run accessibility test on domain
+ * Only works for homepage
+ * // TODO: Crawl site map and queue all pages
+ */
+router.get('/test/accessibility/:domain', function(req, res) {
+    req.setTimeout(5000000000000);
+    const domain = req.params.domain; // Get the domain from the request parameters
+
+    const playwrightService = new PlaywrightService(domain);
+
+    // Call the runAccessibilityTest method
+    playwrightService.getAccessibilityResults().then(results => {
+        // Send the results as a JSON response
+        res.json(results);
+    }).catch(err => {
+        // Handle any errors that occur during the test
+        res.status(500).json({ error: err.message });
+    });
+});
+
+module.exports = router;

routes/index.js

@@ -1,9 +1,13 @@
-var express = require('express');
-var router = express.Router();
+const express = require('express');
+const router = express.Router();
+const SiteModel = require('../models/SiteModel');
+const sitesModel = new SiteModel();
 
 /* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
+router.get('/', async function(req, res, next) {
+  const sites = await sitesModel.getAll();
+  // console.log('Sites:', sites);
+  res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: '' });
 });
 
 module.exports = router;

routes/sites.js

@@ -0,0 +1,106 @@
+const express = require('express');
+const router = express.Router();
+const SiteModel = require('../models/SiteModel');
+const siteModel = new SiteModel();
+
+/**
+ * GET sites listing.
+ *
+ * Returns a list of all sites in JSON format.
+ */
+router.get('/', async function (req, res, next) {
+    const sites = await siteModel.getAll();
+
+    res.json(sites);
+});
+
+/**
+ * GET site by ID.
+ *
+ * Returns a specific site by its ID in JSON format.
+ */
+router.get('/:id', async function (req, res, next) {
+    const siteId = req.params.id;
+    let site = null;
+
+    try {
+        site = await siteModel.getById(siteId);
+    } catch (error) {
+        console.error('Error fetching site by ID:', error);
+        return res.status(400).send('Error fetching site: ' + error.message);
+    }
+
+    if (!site) {
+        return res.status(404).send('Site not found');
+    } else {
+        res.json(site);
+    }
+});
+
+/**
+ * GET site by domain name.
+ *
+ * Returns a specific site by its domain name in JSON format.
+ */
+router.get('/domain/:domain', async function (req, res, next) {
+    const domainName = req.params.domain;
+    let sites = null;
+
+    try {
+        sites = await siteModel.getByDomainName(domainName);
+    } catch (error) {
+        console.error('Error fetching site by domain name:', error);
+        return res.status(400).send('Error fetching site: ' + error.message);
+    }
+
+    if (!sites || sites.length === 0) {
+        return res.status(404).send('Site not found');
+    } else {
+        res.render('sites', { title: 'Playwright Testing Dashboard', sites: sites });
+    }
+});
+
+/**
+ * POST create a new site.
+ *
+ * Creates a new site with the provided domain name.
+ *
+ * // TODO: Ability to add additional site properties (e.g., name, description)
+ */
+router.post('/add', async function (req, res, next) {
+    const domain = req.body.domain;
+    let newSite = null;
+
+    // insert method passes a lot of validation errors to the caller
+    try {
+        newSite = await siteModel.insert(domain);
+    } catch (error) {
+        console.error('Error creating site:', error);
+        return res.status(400).send('Error creating site: ' + error.message);
+    }
+
+    if (!newSite) {
+        res.status(400).send('Error creating site');
+    } else {
+        // res.status(201).json(newSite);
+        const sites = await siteModel.getAll();
+        res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: 'Site created successfully!' });
+    }
+});
+
+/**
+ * PUT update an existing site.
+ *
+ * Updates an existing site with the provided ID and new data.
+ */
+
+// TODO: Implement update functionality
+
+/**
+ * DELETE remove a site by ID.
+ */
+
+// TODO: Implement delete functionality
+
+
+module.exports = router;

services/PlaywrightService.js

@@ -0,0 +1,110 @@
+// import playwright dependencies
+const { chromium } = require('playwright');
+const { injectAxe, checkA11y } = require('axe-playwright');
+const jsdom = require("jsdom");
+
+
+/**
+ * PlaywrightService class
+ * 
+ * This class is used to interact with the Playwright library
+ */
+class PlaywrightService {
+
+    #domain; // domain of the site to be tested
+    
+    // constructor
+    constructor(domain) {
+        this.#domain = domain;
+    }
+
+    // get sitemap url for the this domain
+    sitemapUrl() {
+        return `${this.rootUrl()}/sitemap.xml`;
+    }
+
+    // get the url of the site to be tested
+    rootUrl() {
+        return `https://${this.#domain}`;
+    }
+
+    /**
+     * Get the list of urls to be tested by querying
+     * the sitemap and returning the list of urls
+     * 
+     * @param {string} url - The URL of the sitemap
+     * 
+     * @returns {Array} - The list of urls to be tested
+     */
+    async getUrlList() {
+        const browser = await chromium.launch();
+        const page = await browser.newPage();
+        let urls = [];
+
+        try {
+            await page.goto(this.sitemapUrl());
+            const content = await page.content();
+            const dom = new jsdom.JSDOM(content);
+            const sitemapUrls = dom.window.document.querySelectorAll('a[href]');
+            urls = Array.from(sitemapUrls).map(link => link.href);
+
+            console.log('Sitemap URLs:', urls);
+        } catch (error) {
+            console.error('Error fetching sitemap:', error);
+        } finally {
+            await browser.close();
+        }
+
+        return urls;
+    }
+
+    /**
+     * Loops through the list of urls and runs the
+     * accessibility test on each url
+     * 
+     * @returns {Array} - The list of results from the accessibility test
+     */
+    async getAccessibilityResults() {
+        const urls = await this.getUrlList();
+        let results = [];
+
+        while (urls.length > 0) {
+            const url = urls.pop();
+            console.log('Running accessibility test on:', url);
+            const result = await PlaywrightService.#runAccessibilityTest(url);
+            results.push([url, result]);
+        }
+
+        return results;
+    }
+
+    /**
+     * Run accessibility test on given url
+     * 
+     * @param {string} url - The URL of the page to test
+     * 
+     * @returns {Array} - The list of results from the accessibility test
+     */
+    static async #runAccessibilityTest(url) {
+        const browser = await chromium.launch();
+        const page = await browser.newPage();
+        let results = [];
+
+        try {
+            await page.goto(url); // TODO: Retry if this times out
+            await injectAxe(page);
+            results = await page.evaluate(async () => {
+                return await window.axe.run();
+            });
+        } catch(error) {
+            console.error('Error running accessibility test:', error);
+        } finally {
+            await browser.close();
+        }
+
+        return results?.violations || 'No violations found';
+    }
+
+}   
+
+module.exports = PlaywrightService;

styles/base.css

@@ -1,5 +1,9 @@
 @import 'tailwindcss';
+@source "./views/*.ejs";
+@source "./styles/*.css";
+
 @import './colors.css';
 @import './typography.css';
 
+@plugin "daisyui";
 @plugin "@tailwindcss/typography";

styles/typography.css

@@ -108,12 +108,15 @@ p {
   margin-bottom: 1rem;
 }
 
-li ul, li ol { margin: 0 1rem; }
 
 ul { list-style-type: disc; }
 
+#main-nav ul { list-style-type: none; }
+
 ol { list-style-type: decimal; }
 
+li ul, li ol { margin: 0 1rem; }
+
 ol ol { list-style: lower-alpha; }
 
 ol ol ol { list-style: lower-roman; }

views/add-form.ejs

@@ -0,0 +1,12 @@
+<form action="/sites/add" method="POST" class="w-full">
+  <fieldset class="fieldset bg-base-100 rounded-box px-8 py-4 shadow-md">
+    <legend class="fieldset-legend h3">Start a new test</legend>
+    <div class="flex gap-0">
+      <div class="w-fit m-0 p-0">
+        <input type="text" class="input w-full border-r-0 rounded-r-none" name="domain" id="domain" placeholder="https://example.com/" />
+        <p class="label pt-2">Single URL or link to sitemap, including "http" or "https"</p>
+      </div>
+      <button type="submit" class="btn btn-info">Test</button>
+    </div>
+  </fieldset>
+</form>

views/domain-cards.ejs

@@ -0,0 +1,49 @@
+<%
+// Helper function to format date
+function formatDate(dateString) {
+  let date = new Date(dateString);
+  return date.toLocaleString('en-CA', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  });
+}
+
+// Group data by unique domain_name
+let groupedDomains = {};
+data.forEach(item => {
+  let domain = item.domain_name?.trim();
+  if (!domain) return;
+  if (!groupedDomains[domain]) {
+    groupedDomains[domain] = [];
+  }
+  groupedDomains[domain].push(item);
+});
+%>
+
+<div class="card-container grid gap-6 grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+  <% Object.keys(groupedDomains).forEach(domain => { %>
+    <%
+    // Sort entries by created_at descending and limit to 5
+    let sortedEntries=groupedDomains[domain]
+    .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+    .slice(0, 5);
+    %>
+    <div class="card w-full bg-base-100 card-lg shadow-sm wrap-anywhere">
+      <div class="card-body">
+        <h2 class="card-title"><%= domain %></h2>
+        <% sortedEntries.forEach(entry => { %>
+          <div class="flex font-normal">
+            <p class="w-fit"><%= entry.id %></p>
+            <p class="flex-grow-1"><%= formatDate(entry.created_at) %></p>
+          </div>
+        <% }) %>
+        <div class="card-actions justify-end mt-auto">
+          <a href="/sites/domain/<%= encodeURIComponent(domain) %>" class="btn btn-info text-info-content! hover:text-info-content!">View All Tests</a>
+        </div>
+      </div>
+    </div>
+  <% }) %>
+</div>

views/error.ejs

@@ -1,3 +1,59 @@
-<h1><%= message %></h1>
-<h2><%= error.status %></h2>
-<pre><%= error.stack %></pre>
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap">
+
+  <title>
+    Playwright Dashboard - ERROR
+  </title>
+
+  <link rel='stylesheet' href='/stylesheets/style.css' />
+</head>
+
+<body>
+  <main class="">
+    <header class="bg-gray-200 w-full">
+      <div class="container mx-auto flex justify-between items-center text-gray-800 py-4">
+        <div class="flex items-center">
+          <!-- <img src="/images/logo.png" alt="Logo" class="h-8 mr-2"> -->
+          <h1 class="">
+            Playwright Dashboard - ERROR
+          </h1>
+        </div>
+        <nav>
+          <ul class="flex space-x-4">
+            <li><a href="/" class="text-white hover:text-gray-400">Home</a></li>
+            <li><a href="/about" class="text-white hover:text-gray-400">About</a></li>
+            <li><a href="/contact" class="text-white hover:text-gray-400">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <article class="container mx-auto py-4 min-h-[70dvh]">
+      <h1><%= message %></h1>
+      <h2><%= error.status %></h2>
+      <pre><%= error.stack %></pre>
+    </article>
+
+    <footer class="bg-gray-800 text-white p-4 mt-8">
+      <div class="container mx-auto text-center">
+        <div class="flex justify-center gap-8 items-center mb-4">
+          <p>&copy; <%= new Date().getFullYear() %>
+              Playwright Dashboard. All rights reserved.</p>
+          <p>Powered by <a href="https://example.com" class="text-bodylinks">Your Company</a></p>
+        </div>
+
+        <p>
+          <a href="/privacy" class="text-blue-400">Privacy Policy</a> |
+          <a href="/terms" class="text-blue-400">Terms of Service</a>
+        </p>
+      </div>
+    </footer>
+  </main>
+</body>
+</html>
+

views/header.ejs

@@ -19,11 +19,12 @@
       <div class="container mx-auto flex justify-between items-center text-gray-800 py-4">
         <div class="flex items-center">
           <!-- <img src="/images/logo.png" alt="Logo" class="h-8 mr-2"> -->
-          <h1 class=""><%= title %></h1>
+          <h1 class=""><a class="no-underline!" href="/"><%= title %></a></h1>
         </div>
-        <nav>
+        <nav id="main-nav" class="flex items-center">
           <ul class="flex space-x-4">
             <li><a href="/" class="text-white hover:text-gray-400">Home</a></li>
+            <!-- TODO: Make these routes/pages -->
             <li><a href="/about" class="text-white hover:text-gray-400">About</a></li>
             <li><a href="/contact" class="text-white hover:text-gray-400">Contact</a></li>
           </ul>

views/index.ejs

@@ -1,8 +1,20 @@
 <%- include('header'); -%>
 
 <article class="container mx-auto py-4 min-h-[70dvh]">
-  <h2>Welcome to the <%= title %> EJS Template</h2>
-  <p>This is a simple example of using EJS for templating.</p>
+  <h2>Welcome to <%= title %></h2>
+
+  <%- include('add-form'); -%>
+  <% if (msg) { %>
+    <div class="alert alert-success mt-4">
+      <div class="text-xl"><%= msg %></div>
+    </div>
+  <% } %>
+
+  <h2 class="text-25px font-bold mt-8">Your Tests</h2>
+
+  <div class="mt-8">
+    <%- include('domain-cards', { data: sites }); -%>
+  </div>
 </article>
 
 <%- include('footer'); -%>

views/sites.ejs

@@ -0,0 +1,15 @@
+<%- include('header'); -%>
+
+<article class="container mx-auto py-4 min-h-[70dvh]">
+  <h2>Welcome to <%= title %></h2>
+
+  <%- include('add-form'); -%>
+
+  <h2 class="text-25px font-bold mt-8">Tests for <%= sites[0].domain_name %></h2>
+
+  <div class="mt-8">
+    <%- include('test-list', { sites: sites }); -%>
+  </div>
+</article>
+
+<%- include('footer'); -%>

views/test-list.ejs

@@ -0,0 +1,23 @@
+<%
+// Helper function to format date
+function formatDate(dateString) {
+  let date = new Date(dateString);
+  return date.toLocaleString('en-CA', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  });
+}
+%>
+
+<ul class="list bg-base-100 rounded-box shadow-md mt-8">
+  <% for (let i=0; i < sites.length; i++) { %>
+    <li class="list-row list-none items-center gap-8">
+      <h3 class="text-slate-300 m-0 p-0"><a href="/test/<%= i %>" class="text-slate-300 link">Test <%= i+1 %></a></h3>
+      <span class="site-name list-col-grow text-18px"><%= sites[i].domain_name %> - <%= formatDate(sites[i].created_at) %></span>
+      <span class="badge badge-info">In Progress</span>
+    </li>
+  <% } %>
+</ul>