Add e2e reaction test, improve accessibility, enable parallel testing (#37081)

Add a new e2e test for toggling issue reactions via the reaction picker
dropdown.

Add `aria-label` attributes to improve reaction accessibility:
- Add `aria-label="Reaction"` to the reaction picker dropdown
- Add `role="group"` with `aria-label="Reactions"` to the reactions
container, giving it a semantic identity for screen readers
- Include the reaction key in each reaction button's `aria-label` (e.g.
`+1: user1, user2`) so screen readers announce which reaction a button
represents

E2e test improvements:
- Simplify `randomString` to use `Math.random` instead of `node:crypto`
- Replace `generatePassword` with a static password, remove unused
`clickDropdownItem`
- Enable `fullyParallel: true` and `workers: '50%'` in Playwright config
- Run both chromium and firefox in all environments (not just CI)
- Parallelize `login` and `apiCreateRepo` setup where possible
- Use dedicated test user in `user-settings` test for concurrency safety

Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>

Makefile

@@ -525,7 +525,7 @@ test-mssql-migration: migrations.mssql.test migrations.individual.mssql.test
 .PHONY: playwright
 playwright: deps-frontend
 	@# on GitHub Actions VMs, playwright's system deps are pre-installed
-	@pnpm exec playwright install $(if $(GITHUB_ACTIONS),,--with-deps) chromium $(if $(CI),firefox) $(PLAYWRIGHT_FLAGS)
+	@pnpm exec playwright install $(if $(GITHUB_ACTIONS),,--with-deps) chromium firefox $(PLAYWRIGHT_FLAGS)
 
 .PHONY: test-e2e
 test-e2e: playwright $(EXECUTABLE_E2E)

options/locale/locale_en-US.json

@@ -1043,6 +1043,7 @@
   "repo.forks": "Forks",
   "repo.stars": "Stars",
   "repo.reactions_more": "and %d more",
+  "repo.reactions": "Reactions",
   "repo.unit_disabled": "The site administrator has disabled this repository section.",
   "repo.language_other": "Other",
   "repo.adopt_search": "Enter username to search for unadopted repositories… (leave blank to find all)",

playwright.config.ts

@@ -5,6 +5,8 @@ const timeoutFactor = Number(env.GITEA_TEST_E2E_TIMEOUT_FACTOR) || 1;
 const timeout = 5000 * timeoutFactor;
 
 export default defineConfig({
+  workers: '50%',
+  fullyParallel: true,
   testDir: './tests/e2e/',
   outputDir: './tests/e2e-output/',
   testMatch: /.*\.test\.ts/,
@@ -28,11 +30,11 @@ export default defineConfig({
         permissions: ['clipboard-read', 'clipboard-write'],
       },
     },
-    ...env.CI ? [{
+    {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
       },
-    }] : [],
+    },
   ],
 });

templates/repo/issue/view_content/add_reaction.tmpl

@@ -1,5 +1,5 @@
 {{if ctx.RootData.IsSigned}}
-<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
+<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}" aria-label="{{ctx.Locale.Tr "repo.reactions"}}">
 	<a class="muted">{{svg "octicon-smiley"}}</a>
 	<div class="menu">
 		{{range $value := AllowedReactions}}

templates/repo/issue/view_content/reactions.tmpl

@@ -1,10 +1,10 @@
-<div class="bottom-reactions" data-action-url="{{$.ActionURL}}">
+<div class="bottom-reactions" data-action-url="{{$.ActionURL}}" role="group" aria-label="{{ctx.Locale.Tr "repo.reactions"}}">
 {{range $key, $value := .Reactions}}
 	{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}}
 	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}}"
 		data-global-click="onCommentReactionButtonClick"
 		data-tooltip-content title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
-		aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
+		aria-label="{{$key}}: {{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
 		data-tooltip-placement="bottom-start"
 		data-reaction-content="{{$key}}" data-has-reacted="{{$hasReacted}}">
 		<span class="reaction">{{ReactionToEmoji $key}}</span>

tests/e2e/codeeditor.test.ts

@@ -1,12 +1,11 @@
 import {env} from 'node:process';
 import {expect, test} from '@playwright/test';
-import {login, apiCreateRepo, apiDeleteRepo} from './utils.ts';
+import {login, apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts';
 
 test('codeeditor textarea updates correctly', async ({page, request}) => {
-  const repoName = `e2e-codeeditor-${Date.now()}`;
-  await apiCreateRepo(request, {name: repoName});
+  const repoName = `e2e-codeeditor-${randomString(8)}`;
+  await Promise.all([apiCreateRepo(request, {name: repoName}), login(page)]);
   try {
-    await login(page);
     await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/_new/main`);
     await page.getByPlaceholder('Name your file…').fill('test.js');
     await expect(page.locator('.editor-loading')).toBeHidden();

tests/e2e/events.test.ts

@@ -1,13 +1,12 @@
 import {test, expect} from '@playwright/test';
-import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiDeleteUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, timeoutFactor} from './utils.ts';
+import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiDeleteUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, timeoutFactor, randomString} from './utils.ts';
 
 // These tests rely on a short EVENT_SOURCE_UPDATE_TIME in the e2e server config.
 test.describe('events', () => {
   test('notification count', async ({page, request}) => {
-    const id = `ev-notif-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-    const owner = `${id}-owner`;
-    const commenter = `${id}-commenter`;
-    const repoName = id;
+    const owner = `ev-notif-owner-${randomString(8)}`;
+    const commenter = `ev-notif-commenter-${randomString(8)}`;
+    const repoName = `ev-notif-${randomString(8)}`;
 
     await Promise.all([apiCreateUser(request, owner), apiCreateUser(request, commenter)]);
 
@@ -30,7 +29,7 @@ test.describe('events', () => {
   });
 
   test('stopwatch', async ({page, request}) => {
-    const name = `ev-sw-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const name = `ev-sw-${randomString(8)}`;
     const headers = apiUserHeaders(name);
 
     await apiCreateUser(request, name);
@@ -52,7 +51,7 @@ test.describe('events', () => {
   });
 
   test('logout propagation', async ({browser, request}) => {
-    const name = `ev-logout-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const name = `ev-logout-${randomString(8)}`;
 
     await apiCreateUser(request, name);
 

tests/e2e/milestone.test.ts

@@ -1,11 +1,10 @@
 import {env} from 'node:process';
 import {test, expect} from '@playwright/test';
-import {login, apiCreateRepo, apiDeleteRepo} from './utils.ts';
+import {login, apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts';
 
 test('create a milestone', async ({page}) => {
-  const repoName = `e2e-milestone-${Date.now()}`;
-  await login(page);
-  await apiCreateRepo(page.request, {name: repoName});
+  const repoName = `e2e-milestone-${randomString(8)}`;
+  await Promise.all([login(page), apiCreateRepo(page.request, {name: repoName})]);
   await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/milestones/new`);
   await page.getByPlaceholder('Title').fill('Test Milestone');
   await page.getByRole('button', {name: 'Create Milestone'}).click();

tests/e2e/org.test.ts

@@ -1,8 +1,8 @@
 import {test, expect} from '@playwright/test';
-import {login, apiDeleteOrg} from './utils.ts';
+import {login, apiDeleteOrg, randomString} from './utils.ts';
 
 test('create an organization', async ({page}) => {
-  const orgName = `e2e-org-${Date.now()}`;
+  const orgName = `e2e-org-${randomString(8)}`;
   await login(page);
   await page.goto('/org/create');
   await page.getByLabel('Organization Name').fill(orgName);

tests/e2e/reactions.test.ts

@@ -0,0 +1,30 @@
+import {env} from 'node:process';
+import {expect, test} from '@playwright/test';
+import {login, apiCreateRepo, apiCreateIssue, apiDeleteRepo, randomString} from './utils.ts';
+
+test('toggle issue reactions', async ({page, request}) => {
+  const repoName = `e2e-reactions-${randomString(8)}`;
+  const owner = env.GITEA_TEST_E2E_USER;
+  await apiCreateRepo(request, {name: repoName});
+  await Promise.all([
+    apiCreateIssue(request, owner, repoName, {title: 'Reaction test'}),
+    login(page),
+  ]);
+  try {
+    await page.goto(`/${owner}/${repoName}/issues/1`);
+
+    const issueComment = page.locator('.timeline-item.comment.first');
+
+    const reactionPicker = issueComment.locator('.select-reaction');
+    await reactionPicker.click();
+    await reactionPicker.getByLabel('+1').click();
+
+    const reactions = issueComment.getByRole('group', {name: 'Reactions'});
+    await expect(reactions.getByRole('button', {name: /^\+1:/})).toContainText('1');
+
+    await reactions.getByRole('button', {name: /^\+1:/}).click();
+    await expect(reactions.getByRole('button', {name: /^\+1:/})).toHaveCount(0);
+  } finally {
+    await apiDeleteRepo(request, owner, repoName);
+  }
+});

tests/e2e/readme.test.ts

@@ -1,9 +1,9 @@
 import {env} from 'node:process';
 import {test, expect} from '@playwright/test';
-import {apiCreateRepo, apiDeleteRepo} from './utils.ts';
+import {apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts';
 
 test('repo readme', async ({page}) => {
-  const repoName = `e2e-readme-${Date.now()}`;
+  const repoName = `e2e-readme-${randomString(8)}`;
   await apiCreateRepo(page.request, {name: repoName});
   await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}`);
   await expect(page.locator('#readme')).toContainText(repoName);

tests/e2e/register.test.ts

@@ -1,6 +1,6 @@
 import {env} from 'node:process';
 import {test, expect} from '@playwright/test';
-import {login, logout, apiDeleteUser} from './utils.ts';
+import {login, logout, apiDeleteUser, randomString} from './utils.ts';
 
 test.beforeEach(async ({page}) => {
   await page.goto('/user/sign_up');
@@ -32,7 +32,7 @@ test('register with mismatched passwords shows error', async ({page}) => {
 });
 
 test('register then login', async ({page}) => {
-  const username = `e2e-register-${Date.now()}`;
+  const username = `e2e-register-${randomString(8)}`;
   const email = `${username}@${env.GITEA_TEST_E2E_DOMAIN}`;
   const password = 'password123!';
 

tests/e2e/repo.test.ts

@@ -1,9 +1,9 @@
 import {env} from 'node:process';
 import {test} from '@playwright/test';
-import {login, apiDeleteRepo} from './utils.ts';
+import {login, apiDeleteRepo, randomString} from './utils.ts';
 
 test('create a repository', async ({page}) => {
-  const repoName = `e2e-repo-${Date.now()}`;
+  const repoName = `e2e-repo-${randomString(8)}`;
   await login(page);
   await page.goto('/repo/create');
   await page.locator('input[name="repo_name"]').fill(repoName);

tests/e2e/user-settings.test.ts

@@ -1,14 +1,20 @@
 import {test, expect} from '@playwright/test';
-import {login} from './utils.ts';
+import {loginUser, apiCreateUser, apiDeleteUser, randomString} from './utils.ts';
 
-test('update profile biography', async ({page}) => {
-  const bio = `e2e-bio-${Date.now()}`;
-  await login(page);
-  await page.goto('/user/settings');
-  await page.getByLabel('Biography').fill(bio);
-  await page.getByRole('button', {name: 'Update Profile'}).click();
-  await expect(page.getByLabel('Biography')).toHaveValue(bio);
-  await page.getByLabel('Biography').fill('');
-  await page.getByRole('button', {name: 'Update Profile'}).click();
-  await expect(page.getByLabel('Biography')).toHaveValue('');
+test('update profile biography', async ({page, request}) => {
+  const username = `e2e-settings-${randomString(8)}`;
+  const bio = `e2e-bio-${randomString(8)}`;
+  await apiCreateUser(request, username);
+  try {
+    await loginUser(page, username);
+    await page.goto('/user/settings');
+    await page.getByLabel('Biography').fill(bio);
+    await page.getByRole('button', {name: 'Update Profile'}).click();
+    await expect(page.getByLabel('Biography')).toHaveValue(bio);
+    await page.getByLabel('Biography').fill('');
+    await page.getByRole('button', {name: 'Update Profile'}).click();
+    await expect(page.getByLabel('Biography')).toHaveValue('');
+  } finally {
+    await apiDeleteUser(request, username);
+  }
 });

tests/e2e/utils.ts

@@ -1,7 +1,16 @@
-import {randomBytes} from 'node:crypto';
 import {env} from 'node:process';
 import {expect} from '@playwright/test';
-import type {APIRequestContext, Locator, Page} from '@playwright/test';
+import type {APIRequestContext, Page} from '@playwright/test';
+
+/** Generate a random alphanumeric string. */
+export function randomString(length: number): string {
+  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let index = 0; index < length; index++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
 
 export const timeoutFactor = Number(env.GITEA_TEST_E2E_TIMEOUT_FACTOR) || 1;
 
@@ -63,14 +72,8 @@ export async function apiDeleteOrg(requestContext: APIRequestContext, name: stri
   }), 'apiDeleteOrg');
 }
 
-/** Generate a random password that satisfies the complexity requirements. */
-function generatePassword() {
-  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-  return `${Array.from(randomBytes(12), (b) => chars[b % chars.length]).join('')}!aA1`;
-}
-
-/** Random password shared by all test users — used for both API user creation and browser login. */
-const testUserPassword = generatePassword();
+/** Password shared by all test users — used for both API user creation and browser login. */
+const testUserPassword = 'e2e-password!aA1';
 
 export function apiUserHeaders(username: string) {
   return apiAuthHeader(username, testUserPassword);
@@ -89,11 +92,6 @@ export async function apiDeleteUser(requestContext: APIRequestContext, username:
   }), 'apiDeleteUser');
 }
 
-export async function clickDropdownItem(page: Page, trigger: Locator, itemText: string) {
-  await trigger.click();
-  await page.getByText(itemText).click();
-}
-
 export async function loginUser(page: Page, username: string) {
   return login(page, username, testUserPassword);
 }