kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui-mode): Watch mode button doesn't show active when test selected (#34581)

This commit is contained in:
Udaiveer Pradhan 2025-02-12 00:02:39 +05:30 committed by GitHub
parent 3ae39166c2
commit d2e7e8acdb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/src/components/treeView.css
View File

@ -69,6 +69,11 @@
color: var(--vscode-list-activeSelectionForeground) !important;
}
.tree-view-content:focus .tree-view-entry.selected button.eye.toggled {
border-radius: 6px;
outline: 1px solid var(--vscode-button-foreground);
}
.tree-view-empty {
flex: auto;
display: flex;

29
tests/playwright-test/ui-mode-test-watch.spec.ts
View File

@ -320,3 +320,32 @@ test('should not watch output', async ({ runUITest }) => {
expect(commands).toContain('runTests');
expect(commands).not.toContain('listTests');
});
test('should have watch icon highlighted when a test is focused and watch on the test is enabled', async ({ runUITest }) => {
const { page } = await runUITest({
'a.test.ts': `
import { test, expect } from '@playwright/test';
test('passes', () => {});
`,
});
await page.getByTestId('test-tree').getByText('a.test.ts').click();
// watch icon should not be highlight till the watch icon is clicked
await page.getByRole('treeitem', { name: 'passes' }).hover();
await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).not.toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
await page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).click();
await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' }).locator('.codicon-eye')).toHaveCSS('color', 'rgb(255, 255, 255)');
await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
// deselection of the tree-row should still show the watch icon when watch on tree row is active
await page.getByTestId('test-tree').getByText('a.test.ts').click();
await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).toBeVisible();
await expect(page.getByRole('treeitem', { name: 'passes' }).getByRole('button', { name: 'Watch' })).not.toHaveCSS('outline', 'rgb(255, 255, 255) solid 1px');
await expect.poll(dumpTestTree(page)).toBe(`
▼ ◯ a.test.ts <=
◯ passes 👁
`);
});