Skip to content

Commit baa3485

Browse files
Lightning00BladeDevtools-frontend LUCI CQ
Lightning00Blade
authored and
Devtools-frontend LUCI CQ
committed
[recorder] Move UI test to non hosted mode
Also enabled 3 skipped tests Fixed: 416405148, 383478771, 402695414 Change-Id: I4f5acc56bc7588b64833f3058d3203cf023facd2 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6591761 Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org> Auto-Submit: Nikolay Vitkov <nvitkov@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
1 parent 7ae1102 commit baa3485

File tree

9 files changed

+575
-569
lines changed

9 files changed

+575
-569
lines changed

‎front_end/panels/recorder/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ devtools_entrypoint("bundle") {
5252
visibility = [
5353
":*",
5454
"../../../test/e2e/recorder:*",
55+
"../../../test/e2e_non_hosted/recorder:*",
5556
"../../entrypoints/main/*",
5657
"../../panels/sources/*",
5758
]

‎test/e2e/helpers/quick_open-helpers.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
typeText,
1212
waitFor
1313
} from '../../shared/helper.js';
14+
import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
1415

1516
import {SourceFileEvents, waitForSourceFiles} from './sources-helpers.js';
1617

@@ -20,9 +21,10 @@ const QUICK_OPEN_ITEM_TITLE_SELECTOR = '.filtered-list-widget-title';
2021

2122
const QUICK_OPEN_SELECTED_ITEM_SELECTOR = `${QUICK_OPEN_ITEMS_SELECTOR}.selected`;
2223

23-
export const openCommandMenu = async () => {
24-
const {frontend} = getBrowserAndPages();
25-
24+
export const openCommandMenu = async (
25+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
26+
) => {
27+
const frontend = devToolsPage.page;
2628
switch (platform) {
2729
case 'mac':
2830
await frontend.keyboard.down('Meta');
@@ -51,7 +53,7 @@ export const openCommandMenu = async () => {
5153
break;
5254
}
5355

54-
await waitFor(QUICK_OPEN_SELECTOR);
56+
await devToolsPage.waitFor(QUICK_OPEN_SELECTOR);
5557
};
5658

5759
export const openFileQuickOpen = async () => {

‎test/e2e/recorder/BUILD.gn‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ node_ts_library("recorder") {
1010
"helpers.ts",
1111
"recorder_test.ts",
1212
"replay_test.ts",
13-
"ui_test.ts",
1413
]
1514

1615
deps = [

‎test/e2e/recorder/helpers.ts‎

Lines changed: 96 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,30 @@
33
// found in the LICENSE file.
44

55
import {assert} from 'chai';
6-
import type {ElementHandle, Page} from 'puppeteer-core';
6+
import type {Page} from 'puppeteer-core';
77

88
import type {UserFlow} from '../../../front_end/panels/recorder/models/Schema.js';
99
import type * as Recorder from '../../../front_end/panels/recorder/recorder.js';
1010
import {openCommandMenu} from '../../../test/e2e/helpers/quick_open-helpers.js';
1111
import {
12-
$,
13-
click,
14-
getBrowserAndPages,
15-
getTestServerPort,
16-
goToResource,
1712
platform,
1813
selectOption,
19-
typeText,
20-
waitFor,
21-
waitForAria,
2214
} from '../../../test/shared/helper.js';
15+
import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
2316

2417
const RECORDER_CONTROLLER_TAG_NAME = 'devtools-recorder-controller' as const;
2518
const TEST_RECORDING_NAME = 'New Recording';
2619
const ControlOrMeta = platform === 'mac' ? 'Meta' : 'Control';
2720

28-
export async function getRecordingController() {
29-
return (await waitFor(
30-
RECORDER_CONTROLLER_TAG_NAME,
31-
)) as unknown as ElementHandle<Recorder.RecorderController.RecorderController>;
21+
export async function getRecordingController(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
22+
return await devToolsPage.waitFor(
23+
RECORDER_CONTROLLER_TAG_NAME,
24+
);
3225
}
3326

34-
export async function onRecordingStateChanged(): Promise<unknown> {
35-
const view = await getRecordingController();
27+
export async function onRecordingStateChanged(devToolsPage = getBrowserAndPagesWrappers().devToolsPage):
28+
Promise<unknown> {
29+
const view = await getRecordingController(devToolsPage);
3630
return await view.evaluate(el => {
3731
return new Promise(resolve => {
3832
el.addEventListener(
@@ -46,9 +40,9 @@ export async function onRecordingStateChanged(): Promise<unknown> {
4640
});
4741
}
4842

49-
export async function onRecorderAttachedToTarget(): Promise<unknown> {
50-
const {frontend} = getBrowserAndPages();
51-
return await frontend.evaluate(() => {
43+
export async function onRecorderAttachedToTarget(devToolsPage = getBrowserAndPagesWrappers().devToolsPage):
44+
Promise<unknown> {
45+
return await devToolsPage.evaluate(() => {
5246
return new Promise(resolve => {
5347
window.addEventListener('recorderAttachedToTarget', resolve, {
5448
once: true,
@@ -57,69 +51,70 @@ export async function onRecorderAttachedToTarget(): Promise<unknown> {
5751
});
5852
}
5953

60-
export async function onReplayFinished(): Promise<unknown> {
61-
const view = await getRecordingController();
54+
export async function onReplayFinished(devToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<unknown> {
55+
const view = await getRecordingController(devToolsPage);
6256
return await view.evaluate(el => {
6357
return new Promise(resolve => {
6458
el.addEventListener('replayfinished', resolve, {once: true});
6559
});
6660
});
6761
}
6862

69-
export async function enableUntrustedEventMode() {
70-
const {frontend} = getBrowserAndPages();
71-
await frontend.evaluate(`(async () => {
63+
export async function enableUntrustedEventMode(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
64+
await devToolsPage.evaluate(`(async () => {
7265
// TODO: have an explicit UI setting or perhaps a special event to configure this
7366
// instead of having a global setting.
7467
const Common = await import('./core/common/common.js');
7568
Common.Settings.Settings.instance().createSetting('untrusted-recorder-events', true);
7669
})()`);
7770
}
7871

79-
export async function enableAndOpenRecorderPanel(path: string) {
80-
await goToResource(path);
81-
const {frontend} = getBrowserAndPages();
82-
await openCommandMenu();
83-
await typeText('Show Recorder');
84-
await frontend.keyboard.press('Enter');
85-
await waitFor(RECORDER_CONTROLLER_TAG_NAME);
72+
export async function enableAndOpenRecorderPanel(
73+
path: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
74+
inspectedPage = getBrowserAndPagesWrappers().inspectedPage
75+
76+
) {
77+
await inspectedPage.goToResource(path);
78+
await openCommandMenu(devToolsPage);
79+
await devToolsPage.typeText('Show Recorder');
80+
await devToolsPage.page.keyboard.press('Enter');
81+
await devToolsPage.waitFor(RECORDER_CONTROLLER_TAG_NAME);
8682
}
8783

88-
async function createRecording(name: string, selectorAttribute?: string) {
89-
const newRecordingButton = await waitForAria('Create recording');
84+
async function createRecording(
85+
name: string, selectorAttribute?: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
86+
const newRecordingButton = await devToolsPage.waitForAria('Create recording');
9087
await newRecordingButton.click();
91-
const input = await waitForAria('RECORDING NAME');
88+
const input = await devToolsPage.waitForAria('RECORDING NAME');
9289
await input.type(name);
9390
if (selectorAttribute) {
94-
const input = await waitForAria(
91+
const input = await devToolsPage.waitForAria(
9592
'SELECTOR ATTRIBUTE Learn more',
9693
);
9794
await input.type(selectorAttribute);
9895
}
9996
}
10097

10198
export async function createAndStartRecording(
102-
name?: string,
103-
selectorAttribute?: string,
104-
) {
105-
await createRecording(name ?? TEST_RECORDING_NAME, selectorAttribute);
106-
const onRecordingStarted = onRecordingStateChanged();
107-
await click('devtools-control-button');
108-
await waitFor('devtools-recording-view');
99+
name?: string, selectorAttribute?: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
100+
await createRecording(name ?? TEST_RECORDING_NAME, selectorAttribute, devToolsPage);
101+
const onRecordingStarted = onRecordingStateChanged(devToolsPage);
102+
await devToolsPage.click('devtools-control-button');
103+
await devToolsPage.waitFor('devtools-recording-view');
109104
await onRecordingStarted;
110105
}
111106

112-
export async function changeNetworkConditions(condition: string) {
113-
const {frontend} = getBrowserAndPages();
114-
await frontend.waitForSelector('pierce/#tab-network');
115-
await frontend.click('pierce/#tab-network');
116-
await frontend.waitForSelector('pierce/select[aria-label="Throttling"]');
117-
await frontend.select('pierce/select[aria-label="Throttling"]', condition);
107+
export async function changeNetworkConditions(
108+
condition: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
109+
await devToolsPage.page.waitForSelector('pierce/#tab-network');
110+
await devToolsPage.click('pierce/#tab-network');
111+
await devToolsPage.page.waitForSelector('pierce/select[aria-label="Throttling"]');
112+
await devToolsPage.page.select('pierce/select[aria-label="Throttling"]', condition);
118113
}
119114

120-
export async function openRecorderPanel() {
121-
await click('[aria-label="Recorder"]');
122-
await waitFor('devtools-recording-view');
115+
export async function openRecorderPanel(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
116+
await devToolsPage.click('[aria-label="Recorder"]');
117+
await devToolsPage.waitFor('devtools-recording-view');
123118
}
124119

125120
interface StartRecordingOptions {
@@ -134,9 +129,9 @@ export async function startRecording(
134129
networkCondition: '',
135130
untrustedEvents: false,
136131
},
132+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
137133
) {
138-
const {frontend} = getBrowserAndPages();
139-
await frontend.bringToFront();
134+
await devToolsPage.bringToFront();
140135
if (options.networkCondition) {
141136
await changeNetworkConditions(options.networkCondition);
142137
}
@@ -147,12 +142,11 @@ export async function startRecording(
147142
await createAndStartRecording(TEST_RECORDING_NAME, options.selectorAttribute);
148143
}
149144

150-
export async function stopRecording(): Promise<unknown> {
151-
const {frontend} = getBrowserAndPages();
152-
await frontend.bringToFront();
153-
await raf(frontend);
154-
const onRecordingStopped = onRecordingStateChanged();
155-
await click('aria/End recording');
145+
export async function stopRecording(devToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<unknown> {
146+
await devToolsPage.bringToFront();
147+
await raf(devToolsPage.page);
148+
const onRecordingStopped = onRecordingStateChanged(devToolsPage);
149+
await devToolsPage.click('aria/End recording');
156150
return await onRecordingStopped;
157151
}
158152

@@ -180,10 +174,15 @@ export const processAndVerifyBaseRecording = (
180174
resource = 'recorder/recorder.html',
181175
} = options;
182176

183-
let value = JSON.stringify(recording).replaceAll(
184-
`:${getTestServerPort()}`,
185-
':<test-port>',
186-
);
177+
let value = JSON.stringify(recording)
178+
.replaceAll(
179+
/https:\/\/localhost:\d+/g,
180+
'https://localhost:<test-port>',
181+
)
182+
.replaceAll(
183+
/https:\/\/devtools.oopif.test:\d+/g,
184+
'https://devtools.oopif.test:<test-port>',
185+
);
187186
value = value.replaceAll('\u200b', '');
188187
if (!offsets) {
189188
value = value.replaceAll(
@@ -230,23 +229,24 @@ export const processAndVerifyBaseRecording = (
230229
return parsed;
231230
};
232231

233-
async function setCode(flow: string) {
234-
const view = await getRecordingController();
232+
async function setCode(flow: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
233+
const view = await getRecordingController(devToolsPage);
235234
await view.evaluate((el, flow) => {
236235
el.dispatchEvent(new CustomEvent('setrecording', {detail: flow}));
237236
}, flow);
238237
}
239238

240-
export async function clickSelectButtonItem(itemLabel: string, root: string) {
241-
const selectMenu = await waitFor(root);
242-
const selectMenuButton = await waitFor(
239+
export async function clickSelectButtonItem(
240+
itemLabel: string, root: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
241+
const selectMenu = await devToolsPage.waitFor(root);
242+
const selectMenuButton = await devToolsPage.waitFor(
243243
'select',
244244
selectMenu,
245245
);
246246

247247
void selectOption(await selectMenuButton.toElement('select'), itemLabel);
248248

249-
await click('devtools-button', {root: selectMenu});
249+
await devToolsPage.click('devtools-button', {root: selectMenu});
250250
}
251251

252252
export async function setupRecorderWithScript(
@@ -269,29 +269,31 @@ export async function setupRecorderWithScriptAndReplay(
269269
await onceFinished;
270270
}
271271

272-
export async function getCurrentRecording() {
273-
const {frontend} = getBrowserAndPages();
274-
await frontend.bringToFront();
275-
const controller = await $(RECORDER_CONTROLLER_TAG_NAME);
272+
export async function getCurrentRecording(
273+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
274+
): Promise<UserFlow> {
275+
await devToolsPage.bringToFront();
276+
const controller = await devToolsPage.$(RECORDER_CONTROLLER_TAG_NAME);
276277
const recording = (await controller?.evaluate(
277-
el => JSON.stringify((el as unknown as {getUserFlow(): unknown}).getUserFlow()),
278-
)) as string;
278+
el => JSON.stringify(el.getUserFlow()),
279+
));
279280
return JSON.parse(recording);
280281
}
281282

282283
export async function startOrStopRecordingShortcut(
283-
execute: 'page'|'frontend' = 'frontend',
284+
execute: 'inspectedPage'|'devToolsPage' = 'devToolsPage',
285+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
286+
inspectedPage = getBrowserAndPagesWrappers().inspectedPage,
284287
) {
285-
const {target, frontend} = getBrowserAndPages();
286-
const executeOn = execute === 'frontend' ? frontend : target;
288+
const executeOn = execute === 'devToolsPage' ? devToolsPage.page : inspectedPage.page;
287289
const onRecordingStarted = onRecordingStateChanged();
288290
await executeOn.bringToFront();
289291
await executeOn.keyboard.down(ControlOrMeta);
290292
await executeOn.keyboard.down('e');
291293
await executeOn.keyboard.up(ControlOrMeta);
292294
await executeOn.keyboard.up('e');
293295

294-
await waitFor('devtools-recording-view');
296+
await devToolsPage.waitFor('devtools-recording-view');
295297
return await onRecordingStarted;
296298
}
297299

@@ -305,22 +307,24 @@ export async function startRecordingViaShortcut(path: string) {
305307
await startOrStopRecordingShortcut();
306308
}
307309

308-
export async function replayShortcut() {
309-
const {frontend} = getBrowserAndPages();
310-
await frontend.bringToFront();
311-
await frontend.keyboard.down(ControlOrMeta);
312-
await frontend.keyboard.down('Enter');
313-
await frontend.keyboard.up(ControlOrMeta);
314-
await frontend.keyboard.up('Enter');
310+
export async function replayShortcut(
311+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
312+
) {
313+
await devToolsPage.bringToFront();
314+
await devToolsPage.page.keyboard.down(ControlOrMeta);
315+
await devToolsPage.page.keyboard.down('Enter');
316+
await devToolsPage.page.keyboard.up(ControlOrMeta);
317+
await devToolsPage.page.keyboard.up('Enter');
315318
}
316319

317-
export async function toggleCodeView() {
318-
const {frontend} = getBrowserAndPages();
319-
await frontend.bringToFront();
320-
await frontend.keyboard.down(ControlOrMeta);
321-
await frontend.keyboard.down('b');
322-
await frontend.keyboard.up(ControlOrMeta);
323-
await frontend.keyboard.up('b');
320+
export async function toggleCodeView(
321+
devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
322+
) {
323+
await devToolsPage.bringToFront();
324+
await devToolsPage.page.keyboard.down(ControlOrMeta);
325+
await devToolsPage.page.keyboard.down('b');
326+
await devToolsPage.page.keyboard.up(ControlOrMeta);
327+
await devToolsPage.page.keyboard.up('b');
324328
}
325329

326330
export async function raf(page: Page): Promise<void> {

‎test/e2e/recorder/recorder_test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1475,7 +1475,7 @@ describe('Recorder', function() {
14751475
await target.keyboard.up('e');
14761476

14771477
const recording = (await startOrStopRecordingShortcut(
1478-
'page',
1478+
'inspectedPage',
14791479
)) as UserFlow;
14801480
assert.deepEqual(processAndVerifyBaseRecording(recording), {
14811481
steps: [

0 commit comments

Comments
 (0)