Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: microsoft/playwright-vscode
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 4dc39acff0ee8d45595b98b8239c52d122737a9d
Choose a base ref
..
head repository: microsoft/playwright-vscode
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: e782ce5e1fc9700419080bc847cd5099e6cb4fa7
Choose a head ref
Showing with 124 additions and 51 deletions.
  1. +2 −0 src/traceViewer.ts
  2. +2 −1 tests/trace-viewer-legacy.spec.ts
  3. +119 −49 tests/trace-viewer.spec.ts
  4. +1 −1 tests/utils.ts
2 changes: 2 additions & 0 deletions src/traceViewer.ts
Original file line number Diff line number Diff line change
@@ -143,6 +143,7 @@ export class SpawnTraceViewer extends DisposableBase {
return {
type: 'spawn',
serverUrlPrefix: this._serverUrlPrefix,
testConfigFile: this._config.configFile
};
}
}
@@ -254,6 +255,7 @@ export class EmbeddedTraceViewer extends DisposableBase {
return {
type: 'embedded',
serverUrlPrefix: this._serverUrlPrefix,
testConfigFile: this._config.configFile
};
}
}
3 changes: 2 additions & 1 deletion tests/trace-viewer-legacy.spec.ts
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@ test('should fallback to spawn trace viewer in older @playwright/test projects',

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({
type: 'spawn',
serverUrlPrefix: expect.stringMatching(/http:\/\/0.0.0.0:\d+/),
serverUrlPrefix: expect.anything(),
testConfigFile: expect.stringContaining('playwright.config.js')
});
});
168 changes: 119 additions & 49 deletions tests/trace-viewer.spec.ts
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
* limitations under the License.
*/

import { enableConfigs, expect, test, traceViewerInfo, selectTestItem } from './utils';
import { enableConfigs, expect, test, selectTestItem, traceViewerInfo, selectConfig } from './utils';

test.beforeEach(({ showBrowser, overridePlaywrightVersion }) => {
test.skip(!!overridePlaywrightVersion || showBrowser);
@@ -71,7 +71,7 @@ test('should switch trace when selected test item changes', async ({ activate })
selectTestItem(testItems[0]);
await expect(webview.frameLocator('iframe').frameLocator('iframe.snapshot-visible').locator('h1')).toHaveText('Test 1');

selectTestItem(testItems[0]);
selectTestItem(testItems[1]);
await expect(webview.frameLocator('iframe').frameLocator('iframe.snapshot-visible').locator('h1')).toHaveText('Test 2');
});

@@ -158,89 +158,114 @@ test('should not change trace viewer when running tests from different test conf
});

await enableConfigs(vscode, ['playwright1.config.js', 'playwright2.config.js']);
await expect(testController).toHaveTestTree(`
- tests1
- test.spec.ts
- tests2
- test.spec.ts
`);

let serverUrl1: string;
let serverUrl2: string;
await selectConfig(vscode, 'playwright2.config.js');

{
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/one/);
await testController.run(testItems);
const webview = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
serverUrl1 = await webview.locator('iframe').getAttribute('src') ?? '';
const serverUrlPrefix = new URL(await webview.locator('iframe').getAttribute('src') ?? '').origin;
const traceViewer = traceViewerInfo(vscode);
expect(traceViewer).toMatchObject({
type: 'embedded',
serverUrlPrefix,
testConfigFile: expect.stringMatching('playwright2.config.js'),
});
}

{
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/two/);
await testController.run(testItems);
const webview = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
serverUrl2 = await webview.locator('iframe').getAttribute('src') ?? '';
const serverUrlPrefix = new URL(await webview.locator('iframe').getAttribute('src') ?? '').origin;
const traceViewer = traceViewerInfo(vscode);
expect(traceViewer).toMatchObject({
type: 'embedded',
serverUrlPrefix,
testConfigFile: expect.stringMatching('playwright2.config.js'),
});
}

expect(serverUrl1).toEqual(serverUrl2);
});

test('should change trace viewer when test config changes', async ({ activate }) => {
test('should close trace viewer when selected test config is disabled', async ({ activate }) => {
const { vscode, testController } = await activate({
'playwright1.config.js': `module.exports = { testDir: 'tests1' }`,
'playwright2.config.js': `module.exports = { testDir: 'tests2' }`,
'tests1/test.spec.ts': `
import { test } from '@playwright/test';
test('one', ({ page }) => page.setContent('<h1>One</h1>'));
test('one', () => {});
`,
'tests2/test.spec.ts': `
import { test } from '@playwright/test';
test('two', ({ page }) => page.setContent('<h1>Two</h1>'));
test('one', () => {});
`,
});

let serverUrl1: string;
let serverUrl2: string;

await enableConfigs(vscode, ['playwright1.config.js']);
await expect(testController).toHaveTestTree(`
- tests1
- test.spec.ts
`);
await enableConfigs(vscode, ['playwright1.config.js', 'playwright2.config.js']);
await selectConfig(vscode, 'playwright1.config.js');

{
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/one/);
await testController.run(testItems);
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/one/);
await testController.run(testItems);

const webview = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
const webview = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
const serverUrlPrefix = new URL(await webview.locator('iframe').getAttribute('src') ?? '').origin;

selectTestItem(testItems[0]);
serverUrl1 = await webview.locator('iframe').getAttribute('src') ?? '';
}
selectTestItem(testItems[0]);
const traceViewer = traceViewerInfo(vscode);
expect(traceViewer).toMatchObject({
type: 'embedded',
serverUrlPrefix,
testConfigFile: expect.stringMatching('playwright1.config.js'),
});

// disables playwright1.config.js
await enableConfigs(vscode, ['playwright2.config.js']);
// changing selected config should close trace viewer
// config should close trace viewer
await expect.poll(() => vscode.webViewsByPanelType('playwright.traceviewer.view')).toHaveLength(0);
await expect(testController).toHaveTestTree(`
- tests2
- test.spec.ts
`);
expect.poll(() => traceViewerInfo(vscode)).toBeUndefined();
});

{
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/two/);
await testController.run(testItems);
test('should reopen trace viewer when another test config is selected', async ({ activate }) => {
const { vscode, testController } = await activate({
'playwright1.config.js': `module.exports = { testDir: 'tests1' }`,
'playwright2.config.js': `module.exports = { testDir: 'tests2' }`,
'tests1/test.spec.ts': `
import { test } from '@playwright/test';
test('one', () => {});
`,
'tests2/test.spec.ts': `
import { test } from '@playwright/test';
test('one', () => {});
`,
});

const webview = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
await enableConfigs(vscode, ['playwright1.config.js', 'playwright2.config.js']);
await selectConfig(vscode, 'playwright1.config.js');

selectTestItem(testItems[0]);
serverUrl2 = await webview.locator('iframe').getAttribute('src') ?? '';
}
await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/one/);
await testController.run(testItems);

expect(serverUrl1).not.toEqual(serverUrl2);
const webview1 = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
expect(traceViewerInfo(vscode)).toMatchObject({
type: 'embedded',
serverUrlPrefix: new URL(await webview1.locator('iframe').getAttribute('src') ?? '').origin,
testConfigFile: expect.stringMatching('playwright1.config.js'),
});

await selectConfig(vscode, 'playwright2.config.js');
selectTestItem(testItems[0]);
await webview1.waitForEvent('close');

const webview2 = await vscode.singleWebViewByPanelType('playwright.traceviewer.view')!;
expect(traceViewerInfo(vscode)).toMatchObject({
type: 'embedded',
serverUrlPrefix: new URL(await webview2.locator('iframe').getAttribute('src') ?? '').origin,
testConfigFile: expect.stringMatching('playwright2.config.js'),
});
});

test('should not open trace viewer if selected test item did not run', async ({ activate }) => {
@@ -323,6 +348,51 @@ test('should fallback to spawn trace viewer if embedded not enabled', async ({ a

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({
type: 'spawn',
serverUrlPrefix: expect.stringMatching(/http:\/\/0.0.0.0:\d+/),
serverUrlPrefix: expect.anything(),
testConfigFile: expect.stringContaining('playwright.config.js')
});
});


test('should switch to spawn trace viewer if embedded is disabled and test item is selected', async ({ activate }) => {
const { vscode, testController } = await activate({
'playwright.config.js': `module.exports = { testDir: 'tests' }`,
'tests/test.spec.ts': `
import { test } from '@playwright/test';
test('should pass', async () => {});
`,
});

await testController.expandTestItems(/test.spec/);
const testItems = testController.findTestItems(/pass/);
await testController.run(testItems);

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({ type: 'embedded' });

const configuration = vscode.workspace.getConfiguration('playwright');
configuration.update('embedTraceViewer', false, true);
selectTestItem(testItems[0]);

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({ type: 'spawn' });
});

test('should switch to spawn trace viewer if embedded is disabled and tests are ran again', async ({ activate }) => {
const { vscode, testController } = await activate({
'playwright.config.js': `module.exports = { testDir: 'tests' }`,
'tests/test.spec.ts': `
import { test } from '@playwright/test';
test('should pass', async () => {});
`,
});

await testController.run();

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({ type: 'embedded' });

const configuration = vscode.workspace.getConfiguration('playwright');
configuration.update('embedTraceViewer', false, true);

await testController.run();

await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({ type: 'spawn' });
});
2 changes: 1 addition & 1 deletion tests/utils.ts
Original file line number Diff line number Diff line change
@@ -230,6 +230,6 @@ export async function selectTestItem(testItem: TestItem) {
testItem.testController.vscode.extensions[0].fireTreeItemSelectedForTest(testItem);
}

export function traceViewerInfo(vscode: VSCode): { type: 'spawn' | 'embedded', serverUrlPrefix?: string } | undefined {
export function traceViewerInfo(vscode: VSCode): { type: 'spawn' | 'embedded', serverUrlPrefix?: string, testConfigFile: string } | undefined {
return vscode.extensions[0].traceViewerInfoForTest();
}