test: use testid in e2e tests

Author: UlisesGascon

e2e/website.spec.js

@@ -26,56 +26,60 @@ test.describe('Website Router', () => {
     await expect(mainContent).toBeVisible()
 
     // Check for the Projects heading
-    const projectsHeading = page.locator('h2:has-text("Projects")')
+    const projectsHeading = page.locator('[data-testid="projects-heading"]')
     await expect(projectsHeading).toBeVisible()
 
     // Check for project links in the list
-    const projectLinks = page.locator('ul li a')
+    const projectLinks = page.locator('[data-testid="projects-list"] li a')
     const count = await projectLinks.count()
 
     // We should have at least one project link
     expect(count).toBeGreaterThan(0)
 
     // Check for the Checklists heading
-    const checklistsHeading = page.locator('h2:has-text("Checklists")')
+    const checklistsHeading = page.locator('[data-testid="checklists-heading"]')
     await expect(checklistsHeading).toBeVisible()
 
     // Check for the first table
-    const firstTable = page.locator('table').first()
-    await expect(firstTable).toBeVisible()
+    const checklistsTable = page.locator('[data-testid="checklists-table"]')
+    await expect(checklistsTable).toBeVisible()
     // Check that the table headers exist
-    const docHeader = firstTable.locator('thead tr th:has-text("Documentation")')
-    const titleHeader = firstTable.locator('thead tr th:has-text("Title")')
-    const descHeader = firstTable.locator('thead tr th:has-text("Description")')
-    const authorHeader = firstTable.locator('thead tr th:has-text("Author")')
+    const docHeader = checklistsTable.locator('thead tr th:has-text("Documentation")')
+    const titleHeader = checklistsTable.locator('thead tr th:has-text("Title")')
+    const descHeader = checklistsTable.locator('thead tr th:has-text("Description")')
+    const authorHeader = checklistsTable.locator('thead tr th:has-text("Author")')
 
     await expect(docHeader).toBeVisible()
     await expect(titleHeader).toBeVisible()
     await expect(descHeader).toBeVisible()
     await expect(authorHeader).toBeVisible()
 
     // Check for at least one row in the table
-    const rows = await firstTable.locator('tr')
+    const rows = await checklistsTable.locator('tr')
     expect(await rows.count()).toBeGreaterThan(0)
 
     // Check for the Compliance Checks heading
-    const complianceChecksHeading = page.locator('h2:has-text("Compliance Checks")')
+    const complianceChecksHeading = page.locator('[data-testid="compliance-checks-heading"]')
     await expect(complianceChecksHeading).toBeVisible()
 
+    // Check for Compliance Checks Description
+    const complianceChecksDescription = page.locator('[data-testid="compliance-checks-description"]')
+    await expect(complianceChecksDescription).toBeVisible()
+
     // Check for the second table
-    const secondTable = page.locator('table').last()
-    await expect(secondTable).toBeVisible()
+    const complianceChecksTable = page.locator('[data-testid="compliance-checks-table"]')
+    await expect(complianceChecksTable).toBeVisible()
     // Check that the table headers exist
-    const docHeader2 = secondTable.locator('thead tr th:has-text("Documentation")')
-    const nameHeader = secondTable.locator('thead tr th:has-text("Name")')
-    const descHeader2 = secondTable.locator('thead tr th:has-text("Description")')
+    const docHeader2 = complianceChecksTable.locator('thead tr th:has-text("Documentation")')
+    const nameHeader = complianceChecksTable.locator('thead tr th:has-text("Name")')
+    const descHeader2 = complianceChecksTable.locator('thead tr th:has-text("Description")')
 
     await expect(docHeader2).toBeVisible()
     await expect(nameHeader).toBeVisible()
     await expect(descHeader2).toBeVisible()
 
     // Check for at least one row in the table
-    const rows2 = await secondTable.locator('tr')
+    const rows2 = await complianceChecksTable.locator('tr')
     expect(await rows2.count()).toBeGreaterThan(0)
   })
 
@@ -87,7 +91,7 @@ test.describe('Website Router', () => {
     await expect(page).toHaveURL(`/projects/${testProjectId}`)
 
     // Check for the project name in the heading
-    const projectHeading = page.locator('h1')
+    const projectHeading = page.locator('[data-testid="project-heading"]')
     await expect(projectHeading).toBeVisible()
     await expect(projectHeading).toContainText('Report')
 
@@ -97,41 +101,32 @@ test.describe('Website Router', () => {
 
     // Check for section headings that should be present on project pages
     const sectionHeadings = [
-      'Alerts',
-      'Results',
-      'Tasks'
+      '[data-testid="alerts-heading"]',
+      '[data-testid="results-heading"]',
+      '[data-testid="tasks-heading"]',
+      '[data-testid="ossf-scorecard-heading"]',
+      '[data-testid="github-orgs-heading"]',
+      '[data-testid="github-repos-heading"]'
     ]
 
     for (const headingText of sectionHeadings) {
-      const heading = page.locator(`h2:has-text("${headingText}")`)
+      const heading = page.locator(headingText)
       await expect(heading).toBeVisible()
     }
 
-    // Check for OSSF scorecard section
-    const ossfHeading = page.locator('h2:has-text("OSSF Scorecard Analysis")')
-    await expect(ossfHeading).toBeVisible()
-
-    // Check for GitHub organizations section
-    const githubOrgsHeading = page.locator('h2:has-text("GitHub Organizations in scope")')
-    await expect(githubOrgsHeading).toBeVisible()
-
-    // Check for an organization list
-    const list = page.locator('ul li')
+    // Check for a GitHub organization list
+    const list = page.locator('[data-testid="github-orgs-list"] li')
     await expect(list).toBeVisible()
 
-    // Check for GitHub repositories section
-    const githubReposHeading = page.locator('h2:has-text("GitHub repositories in scope")')
-    await expect(githubReposHeading).toBeVisible()
-
-    // Check for the first table
-    const firstTable = page.locator('table').first()
-    await expect(firstTable).toBeVisible()
+    // Check for the GitHub repositories table
+    const githubReposTable = page.locator('[data-testid="github-repos-table"]')
+    await expect(githubReposTable).toBeVisible()
     // Check that the table headers exist
-    const repositoryHeader = firstTable.locator('thead tr th:has-text("Repository")')
-    const starsHeader = firstTable.locator('thead tr th:has-text("Stars")')
-    const forksHeader = firstTable.locator('thead tr th:has-text("Forks")')
-    const subscribersHeader = firstTable.locator('thead tr th:has-text("Subscribers")')
-    const issuesHeader = firstTable.locator('thead tr th:has-text("Open Issues")')
+    const repositoryHeader = githubReposTable.locator('thead tr th:has-text("Repository")')
+    const starsHeader = githubReposTable.locator('thead tr th:has-text("Stars")')
+    const forksHeader = githubReposTable.locator('thead tr th:has-text("Forks")')
+    const subscribersHeader = githubReposTable.locator('thead tr th:has-text("Subscribers")')
+    const issuesHeader = githubReposTable.locator('thead tr th:has-text("Open Issues")')
 
     await expect(repositoryHeader).toBeVisible()
     await expect(starsHeader).toBeVisible()
@@ -140,7 +135,7 @@ test.describe('Website Router', () => {
     await expect(issuesHeader).toBeVisible()
 
     // Check for at least one row in the table
-    const rows = await firstTable.locator('tr')
+    const rows = await githubReposTable.locator('tr')
     expect(await rows.count()).toBeGreaterThan(0)
   })
 
@@ -149,14 +144,14 @@ test.describe('Website Router', () => {
     await page.goto('/projects/invalid')
 
     // Check for the Not Found heading
-    const notFoundHeading = page.locator('h1:has-text("Not Found!")')
+    const notFoundHeading = page.locator('[data-testid="not-found-title"]')
     await expect(notFoundHeading).toBeVisible()
 
     // Test with non-existent numeric ID
     await page.goto('/projects/999999')
 
     // Check for the Not Found heading
-    const notFoundHeading2 = page.locator('h1:has-text("Not Found!")')
+    const notFoundHeading2 = page.locator('[data-testid="not-found-title"]')
     await expect(notFoundHeading2).toBeVisible()
   })
 

src/reports/templates/index.ejs

@@ -16,9 +16,9 @@
                 registered. Every project listed includes additional reports with its own dashboard, tasks, and alerts.
             </p>
 
-            <h2 class="text-2xl font-bold mb-4">Projects</h2>
+            <h2 class="text-2xl font-bold mb-4" data-testid="projects-heading">Projects</h2>
             <p class="mb-4">Click on any project to get more details:</p>
-            <ul class="list-disc list-inside mb-6">
+            <ul class="list-disc list-inside mb-6" data-testid="projects-list">
                 <% projects.forEach(project=> { %>
                     <li>
                         <a href="<%= resolveLink('', project) %>" class="text-blue-500 underline font-bold">
@@ -28,8 +28,8 @@
                 <% }) %>
             </ul>
 
-            <h2 class="text-2xl font-bold mb-4">Checklists</h2>
-            <table class="w-full border border-gray-300 border-collapse mb-6">
+            <h2 class="text-2xl font-bold mb-4" data-testid="checklists-heading">Checklists</h2>
+            <table class="w-full border border-gray-300 border-collapse mb-6" data-testid="checklists-table">
                 <thead>
                     <tr class="bg-gray-200">
                         <th class="border border-gray-300 px-4 py-2 text-left">Documentation</th>
@@ -61,13 +61,13 @@
                 </tbody>
             </table>
 
-            <h2 class="text-2xl font-bold mb-4">Compliance Checks</h2>
-            <p class="mb-4">Currently <span class="font-bold">
+            <h2 class="text-2xl font-bold mb-4" data-testid="compliance-checks-heading">Compliance Checks</h2>
+            <p class="mb-4" data-testid="compliance-checks-description">Currently <span class="font-bold">
                     <%= checks.filter(i=> i.implementation_status === "completed").length %>/<%= checks.length %>
                 </span> are implemented. <a href="https://openpathfinder.com/contribute"
                     class="text-blue-500 underline font-bold">Help us</a> to implement more!</p>
 
-            <table class="w-full border border-gray-300 border-collapse">
+            <table class="w-full border border-gray-300 border-collapse" data-testid="compliance-checks-table">
                 <thead>
                     <tr class="bg-gray-200">
                         <th class="border border-gray-300 px-4 py-2 text-left">Documentation</th>

src/reports/templates/notFound.ejs

@@ -10,9 +10,9 @@
 
     <div class="flex-grow">
         <main class="container mx-auto p-6">
-            <h1 class="text-2xl font-bold mb-4">Not Found!</h1>
-            <p class="text-gray-700 mb-4">The page you are looking for does not exist.</p>
-            <a href="/" class="text-blue-600 underline">Return to the home page</a>
+            <h1 class="text-2xl font-bold mb-4" data-testid="not-found-title">Not Found!</h1>
+            <p class="text-gray-700 mb-4" data-testid="not-found-description">The page you are looking for does not exist.</p>
+            <a href="/" class="text-blue-600 underline" data-testid="not-found-return-link">Return to the home page</a>
         </main>
     </div>
     <div class="mt-auto">

src/reports/templates/project.ejs

@@ -9,7 +9,7 @@
   <%- include('partials/navigation') %>
   <div class="flex-grow">
     <main class="container mx-auto p-6">
-      <h1 class="text-2xl font-bold mb-4">
+      <h1 class="text-2xl font-bold mb-4" data-testid="project-heading">
         <%= project.name %> Report
       </h1>
       <p class="text-gray-700 mb-4">In this dashboard, you can find the relevant information for the project <span
@@ -27,7 +27,7 @@
     </span>.</p>
 
       <!-- Alerts -->
-      <h2 class="text-2xl font-bold mb-4">Alerts</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="alerts-heading">Alerts</h2>
       <div class="mb-6">
         <% if (alerts && alerts.length > 0) { %>
           <ul class="space-y-4">
@@ -52,7 +52,7 @@
       </div>
 
       <!-- Results -->
-      <h2 class="text-2xl font-bold mb-4">Results</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="results-heading">Results</h2>
       <% if (tasks && tasks.length > 0) { %>
 
       <table class="w-full border border-gray-300 border-collapse mb-6">
@@ -93,7 +93,7 @@
       <% } %>
 
       <!-- Tasks -->
-      <h2 class="text-2xl font-bold mb-4">Tasks</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="tasks-heading">Tasks</h2>
       <div class="mb-6">
         <% if (tasks && tasks.length > 0) { %>
           <% tasks.forEach(task => { %>
@@ -121,7 +121,7 @@
 
 
       <!-- OSSF Scorecard Analysis -->
-      <h2 class="text-2xl font-bold mb-4">OSSF Scorecard Analysis</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="ossf-scorecard-heading">OSSF Scorecard Analysis</h2>
       <% if (ossfScorecardResults && ossfScorecardResults.length > 0) { %>
 
         <table class="w-full border border-gray-300 border-collapse mb-6">
@@ -171,9 +171,9 @@
 
 
       <!-- List all the organizations -->
-      <h2 class="text-2xl font-bold mb-4">GitHub Organizations in scope</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="github-orgs-heading">GitHub Organizations in scope</h2>
       <% if (githubOrgs && githubOrgs.length > 0) { %>
-        <ul class="space-y-4 mb-6">
+        <ul class="space-y-4 mb-6" data-testid="github-orgs-list">
           <% githubOrgs.forEach(org => { %>
             <li class="p-4 border border-gray-300 rounded-md shadow">
               <img src="<%= org.avatar_url %>" alt="<%= org.name %> logo" class="w-12 h-12 rounded-full mb-2">
@@ -193,11 +193,11 @@
 
 
       <!-- List all the repositories -->
-      <h2 class="text-2xl font-bold mb-4">GitHub repositories in scope</h2>
+      <h2 class="text-2xl font-bold mb-4" data-testid="github-repos-heading">GitHub repositories in scope</h2>
 
       <% if (githubRepos && githubRepos.length > 0) { %>
 
-        <table class="w-full border border-gray-300 border-collapse mb-6">
+        <table class="w-full border border-gray-300 border-collapse mb-6" data-testid="github-repos-table">
           <thead>
             <tr class="bg-gray-200">
               <th class="border border-gray-300 px-4 py-2 text-left">Repository</th>