fix(ui): when --grep is used, UI should only show selected tests (#31815)

Closes https://github.com/microsoft/playwright/issues/31617.

packages/playwright/src/isomorphic/testServerInterface.ts

@@ -79,6 +79,8 @@ export interface TestServerInterface {
   listTests(params: {
     projects?: string[];
     locations?: string[];
+    grep?: string;
+    grepInvert?: string;
   }): Promise<{
     report: ReportEntry[],
     status: reporterTypes.FullResult['status']

packages/playwright/src/runner/testServer.ts

@@ -261,6 +261,8 @@ class TestServerDispatcher implements TestServerInterface {
     }
 
     config.cliArgs = params.locations || [];
+    config.cliGrep = params.grep;
+    config.cliGrepInvert = params.grepInvert;
     config.cliProjectFilter = params.projects?.length ? params.projects : undefined;
     config.cliListOnly = true;
 

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -161,7 +161,7 @@ export const UIModeView: React.FC<{}> = ({
       commandQueue.current = commandQueue.current.then(async () => {
         setIsLoading(true);
         try {
-          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args });
+          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
           teleSuiteUpdater.processListReport(result.report);
         } catch (e) {
           // eslint-disable-next-line no-console
@@ -186,7 +186,7 @@ export const UIModeView: React.FC<{}> = ({
         if (status !== 'passed')
           return;
 
-        const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args });
+        const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
         teleSuiteUpdater.processListReport(result.report);
 
         testServerConnection.onListChanged(updateList);

tests/playwright-test/match-grep.spec.ts

@@ -99,3 +99,8 @@ test('should be case sensitive by default with a regex', async ({ runInlineTest
   const result = await runInlineTest(files, { 'grep': '/TesT Cc/' });
   expect(result.passed).toBe(0);
 });
+
+test('excluded tests should not be shown in UI', async ({ runInlineTest, runTSC }) => {
+  const result = await runInlineTest(files, { 'grep': 'Test AA' });
+  expect(result.passed).toBe(3);
+});

tests/playwright-test/ui-mode-test-filters.spec.ts

@@ -229,3 +229,18 @@ test('should filter skipped', async ({ runUITest, createLatch }) => {
         ⊘ fails
   `);
 });
+
+test('should only show tests selected with --grep', async ({ runUITest }) => {
+  const { page } = await runUITest(basicTestTree, undefined, {
+    additionalArgs: ['--grep', 'fails'],
+  });
+  await expect.poll(dumpTestTree(page)).not.toContain('passes');
+});
+
+test('should not show tests filtered with --grep-invert', async ({ runUITest }) => {
+  const { page } = await runUITest(basicTestTree, undefined, {
+    additionalArgs: ['--grep-invert', 'fails'],
+  });
+  await expect.poll(dumpTestTree(page)).toContain('passes');
+  await expect.poll(dumpTestTree(page)).not.toContain('fails');
+});