Add Playwright happy-path E2E

package.json

@@ -9,7 +9,10 @@
     "build:prod": "vite build && cp src/api/config.prod.php dist/api/config.php",
     "preview": "vite preview",
     "test": "vitest run && ./vendor/bin/phpunit",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:setup-db": "node test/e2e/db.mjs setup",
+    "test:e2e:teardown-db": "node test/e2e/db.mjs teardown"
   },
   "dependencies": {
     "angular": "^1.5.3",
@@ -26,6 +29,7 @@
     "ng-pattern-restrict": "^0.2.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "angular-mocks": "^1.8.3",
     "jsdom": "^29.1.0",
     "less": "^4.2.0",

playwright.config.js

@@ -0,0 +1,65 @@
+import { defineConfig, devices } from '@playwright/test';
+
+function sanitizeRunId(value) {
+  return value.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 32);
+}
+
+function hashToPort(value, offset) {
+  let hash = 0;
+  for (const char of value) {
+    hash = (hash * 31 + char.charCodeAt(0)) % 10_000;
+  }
+  return 20_000 + offset + hash;
+}
+
+const runId = sanitizeRunId(process.env.E2E_RUN_ID || `${Date.now()}_${process.pid}`);
+const phpPort = process.env.E2E_PHP_PORT || String(hashToPort(runId, 0));
+const vitePort = process.env.E2E_VITE_PORT || String(hashToPort(runId, 10_000));
+const phpRoot = process.env.E2E_PHP_ROOT || `.cache/e2e-php-${runId}`;
+const baseURL = process.env.E2E_BASE_URL || `http://127.0.0.1:${vitePort}`;
+
+Object.assign(process.env, {
+  E2E_RUN_ID: runId,
+  E2E_DB_NAME: process.env.E2E_DB_NAME || `rcv_e2e_${runId}`,
+  E2E_PHP_PORT: phpPort,
+  E2E_VITE_PORT: vitePort,
+  E2E_PHP_ROOT: phpRoot,
+  E2E_BASE_URL: baseURL
+});
+
+export default defineConfig({
+  testDir: './test/e2e',
+  globalSetup: './test/e2e/global-setup.mjs',
+  globalTeardown: './test/e2e/global-teardown.mjs',
+  fullyParallel: false,
+  workers: 1,
+  timeout: 45_000,
+  expect: {
+    timeout: 10_000
+  },
+  use: {
+    baseURL,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure'
+  },
+  webServer: [
+    {
+      command: `node test/e2e/prepare-php-server.mjs && php -S 127.0.0.1:${phpPort} -t ${phpRoot}`,
+      url: `http://127.0.0.1:${phpPort}/api/get-candidates.php`,
+      reuseExistingServer: false,
+      timeout: 120_000
+    },
+    {
+      command: `npm run dev -- --host 127.0.0.1 --port ${vitePort}`,
+      url: baseURL,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120_000
+    }
+  ],
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+});

src/pages/create.html

@@ -1,4 +1,4 @@
-<div ng-show="activeLink == 'create'" class="panel panel-default">
+<div ng-show="activeLink == 'create'" class="panel panel-default" data-testid="create-view">
   <div class="panel-body">
     <h1><span ng-show="editBallot">Edit </span>Ballot: {{ballot.name}}</h1>
     <div ng-show="editBallot" class="form-group">
@@ -16,7 +16,12 @@ <h1><span ng-show="editBallot">Edit </span>Ballot: {{ballot.name}}</h1>
     >
       <div class="form-group">
         <label>Ballot Name</label>
-        <input name="name" ng-model="ballot.name" class="form-control" /><span
+        <input
+          name="name"
+          ng-model="ballot.name"
+          class="form-control"
+          data-testid="ballot-name-input"
+        /><span
           ng-show="errors.name"
           class="text-danger"
           >{{errors.name}}</span
@@ -33,6 +38,7 @@ <h1><span ng-show="editBallot">Edit </span>Ballot: {{ballot.name}}</h1>
             ng-change="checkAvailability()"
             maxlength="16"
             class="form-control"
+            data-testid="ballot-key-input"
           /><span class="input-group-btn">
             <button type="button" ng-click="generateRandomKey()" class="btn btn-primary">
               New Shortcode
@@ -524,7 +530,13 @@ <h4>
           </div>
         </div>
       </div>
-      <input type="submit" value="Submit" ng-disabled="errors.key" class="btn btn-info" />
+      <input
+        type="submit"
+        value="Submit"
+        ng-disabled="errors.key"
+        class="btn btn-info"
+        data-testid="ballot-submit"
+      />
     </form>
     <div ng-show="entries &amp;&amp; !congrats &amp;&amp; !showGroupPage">
       <div ng-show="!editBallot || editBallot_Options == 'false'">
@@ -536,16 +548,22 @@ <h4>
               ng-model="entryInput"
               ng-change="errorEntry = ''"
               class="form-control"
+              data-testid="entry-input"
             /><span ng-show="errorEntry">{{errorEntry}}</span>
           </div>
-          <button type="submit" class="btn btn-info">Add Entry</button>
-          <button type="button" ng-click="submitEntries()" class="btn btn-default">
+          <button type="submit" class="btn btn-info" data-testid="entry-add">Add Entry</button>
+          <button
+            type="button"
+            ng-click="submitEntries()"
+            class="btn btn-default"
+            data-testid="entries-submit"
+          >
             <span ng-show="ballot.allowGrouping">Next: Voter Prompts</span>
             <span ng-hide="ballot.allowGrouping">Submit All Entries</span>
           </button>
         </form>
         <h2>Current Entry List</h2>
-        <h5 ng-repeat="entry in entries track by $index">
+        <h5 ng-repeat="entry in entries track by $index" data-testid="entry-list-item">
           <div
             style="display: inline-block"
             ng-style="entryColors[$index] ? {'background-color': '#' + entryColors[$index], 'padding': '2px 6px', 'border-radius': '4px'} : {}"
@@ -717,13 +735,16 @@ <h4>Custom Voter Prompts</h4>
         Submit Voter Prompts
       </button>
     </div>
-    <div ng-show="congrats">
+    <div ng-show="congrats" data-testid="ballot-created">
       <div class="row">
         <div class="col-sm-6">
           <h3>Thank you for creating a ballot!</h3>
           <h4>Send this url or QR code to people for voting:</h4>
           <h4 class="text-success">{{origin}}/{{ballot.key}}</h4>
-          <a ng-hide="ballot.isSecure" href="{{origin}}/vote#{{ballot.key}}"
+          <a
+            ng-hide="ballot.isSecure"
+            href="{{origin}}/vote#{{ballot.key}}"
+            data-testid="vote-self-link"
             >Click here to vote yourself</a
           >
           <a ng-show="ballot.isSecure" href="{{origin}}/profile"

src/pages/results.html

@@ -1,4 +1,4 @@
-      <div ng-show="activeLink == 'results'" class="panel panel-default">
+      <div ng-show="activeLink == 'results'" class="panel panel-default" data-testid="results-view">
         <div class="panel-body">
           <div ng-hide="final">
             <div class="row">
@@ -38,13 +38,14 @@ <h1>Results</h1>
               </div>
             </div>
           </div>
-          <div ng-show="final">
+          <div ng-show="final" data-testid="results-final">
             <div ng-show="elected[0].image" class="pull-right">
               <img ng-src="{{elected[0].image}}" class="winner-image" />
             </div>
-            <h1>Results<span class="ballot-name"></span></h1>
+            <h1 data-testid="results-title">Results<span class="ballot-name"></span></h1>
             <h2 ng-show="elected.length == 1">
-              The winner<span ng-if="!voteClosed"> (so far)</span>: {{elected[0].name}}
+              The winner<span ng-if="!voteClosed"> (so far)</span>:
+              <span data-testid="results-winner-name">{{elected[0].name}}</span>
             </h2>
             <div ng-show="elected.length > 1">
               <h2>
@@ -160,4 +161,4 @@ <h4>
             <span ng-show="errors.shortcode" class="text-danger">{{errors.shortcode}}</span>
           </div>
         </div>
-      </div>
+      </div>

src/pages/vote.html

@@ -1,4 +1,4 @@
-<div ng-show="activeLink == 'vote'" class="panel panel-default">
+<div ng-show="activeLink == 'vote'" class="panel panel-default" data-testid="vote-view">
   <div class="panel-body">
     <div ng-hide="candidates">
       <div class="row">
@@ -33,7 +33,7 @@ <h1>Vote!</h1>
       ng-if="candidates && ballot.isSecure && !secureCodeValid"
       ng-hide="thanks || deviceAlreadyVoted"
     >
-      <h1>Ballot: {{ballot.name}}</h1>
+      <h1 data-testid="vote-ballot-title">Ballot: {{ballot.name}}</h1>
       <h3>Enter your voter code to proceed</h3>
       <form ng-submit="validateSecureCode()">
         <div class="form-group" style="max-width: 300px">
@@ -55,7 +55,7 @@ <h3>Enter your voter code to proceed</h3>
       ng-if="candidates && ballot.allowGrouping && !groupAnswersSubmitted && (!ballot.isSecure || secureCodeValid)"
       ng-hide="thanks || deviceAlreadyVoted"
     >
-      <h1>Ballot: {{ballot.name}}</h1>
+      <h1 data-testid="vote-ballot-title">Ballot: {{ballot.name}}</h1>
       <form ng-submit="submitGroupAnswers()">
         <div ng-hide="ballot.register == 2 || ballot.isSecure" style="margin-bottom: 15px">
           <label for="voter-name">Your Name<span ng-show="ballot.register == 1">*</span>:</label>
@@ -124,8 +124,9 @@ <h1>Ballot: {{ballot.name}}</h1>
     <div
       ng-if="candidates && (!ballot.isSecure || secureCodeValid) && (!ballot.allowGrouping || groupAnswersSubmitted)"
       ng-hide="thanks || deviceAlreadyVoted"
+      data-testid="vote-ballot-form"
     >
-      <h1>Ballot: {{ballot.name}}</h1>
+      <h1 data-testid="vote-ballot-title">Ballot: {{ballot.name}}</h1>
       <div
         ng-if="voteCutoffMoment && cutoffSecondsLeft > 0 && cutoffSecondsLeft <= 300"
         class="alert alert-warning"
@@ -197,6 +198,7 @@ <h3 class="hide" ng-show="ballot.positions &gt; 1">
               ng-repeat="item in candidates track by $index"
               data-id="{{item.id}}"
               class="candidate-item"
+              data-testid="vote-candidate"
               ng-style="item.color ? {'background-color': '#' + item.color} : {}"
             >
               <i ng-click="removeCandidate($index)" class="fa fa-trash remove-btn"></i>
@@ -207,13 +209,14 @@ <h3 class="hide" ng-show="ballot.positions &gt; 1">
                 ng-if="item.hyperlink"
                 >{{item.name}} <i class="fa fa-external-link"></i
               ></a>
-              <div ng-if="!item.hyperlink">{{item.name}}</div>
+              <div ng-if="!item.hyperlink" data-testid="vote-candidate-name">{{item.name}}</div>
             </li>
           </ul>
           <button
             type="submit"
             ng-disabled="candidates.length === 0 || (voteCutoffMoment && cutoffSecondsLeft <= 0)"
             class="btn btn-primary clearfix"
+            data-testid="vote-submit"
           >
             Vote!
           </button>
@@ -222,11 +225,11 @@ <h3 class="hide" ng-show="ballot.positions &gt; 1">
       </div>
       <h4>Voting URL: {{origin}}/{{ballot.key}}</h4>
     </div>
-    <div ng-show="thanks">
-      <h1>Ballot: {{ballot.name}}</h1>
+    <div ng-show="thanks" data-testid="vote-thanks">
+      <h1 data-testid="vote-ballot-title">Ballot: {{ballot.name}}</h1>
       <h3>Thank you for voting!</h3>
       <h4 ng-if="resultsReady">
-        <a href="/results#{{shortcode}}">Click here to see the results</a>
+        <a href="/results#{{shortcode}}" data-testid="results-link">Click here to see the results</a>
       </h4>
       <h5 ng-if="ballot.isSecure && !resultsReady">
         Visit <a href="/results#{{shortcode}}">{{origin}}/results#{{ballot.key}}</a> after
@@ -246,7 +249,7 @@ <h5>Voting URL: {{origin}}/{{ballot.key}}</h5>
       </p>
     </div>
     <div ng-show="deviceAlreadyVoted">
-      <h1>Ballot: {{ballot.name}}</h1>
+      <h1 data-testid="vote-ballot-title">Ballot: {{ballot.name}}</h1>
       <h3>This device has already voted on this ballot.</h3>
       <p>
         Each device is limited to one vote. If you believe this is an error, please contact the