Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(recorder): address the react race condition (#32628)

Browse source
This commit is contained in:
Pavel Feldman 2024-09-16 13:47:13 -07:00 committed by GitHub
parent ce06a81aa6
commit 92c6408b94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 27 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/playwright-core/src/server/recorder.ts
View file

@ -132,10 +132,9 @@ export class Recorder implements InstrumentationListener, IRecorder {
this._context.instrumentation.removeListener(this);
this._recorderApp?.close().catch(() => {});
});
this._contextRecorder.on(ContextRecorder.Events.Change, (data: { sources: Source[], primaryFileName: string }) => {
this._contextRecorder.on(ContextRecorder.Events.Change, (data: { sources: Source[] }) => {
this._recorderSources = data.sources;
this._pushAllSources();
this._recorderApp?.setFileIfNeeded(data.primaryFileName);
});
await this._context.exposeBinding('__pw_recorderState', false, source => {
@ -294,7 +293,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
}
this._pushAllSources();
if (fileToSelect)
this._recorderApp?.setFileIfNeeded(fileToSelect);
this._recorderApp?.setFile(fileToSelect);
}
private _pushAllSources() {

5
packages/playwright-core/src/server/recorder/contextRecorder.ts
View file

@ -97,10 +97,7 @@ export class ContextRecorder extends EventEmitter {
if (languageGenerator === this._orderedLanguages[0])
this._throttledOutputFile?.setContent(source.text);
}
this.emit(ContextRecorder.Events.Change, {
sources: this._recorderSources,
primaryFileName: this._orderedLanguages[0].id
});
this.emit(ContextRecorder.Events.Change, { sources: this._recorderSources });
});
context.on(BrowserContext.Events.BeforeClose, () => {
this._throttledOutputFile?.flush();

8
packages/playwright-core/src/server/recorder/recorderApp.ts
View file

@ -30,7 +30,7 @@ import type { IRecorder, IRecorderApp, IRecorderAppFactory } from './recorderFro
declare global {
interface Window {
playwrightSetFileIfNeeded: (file: string) => void;
playwrightSetFile: (file: string) => void;
playwrightSetMode: (mode: Mode) => void;
playwrightSetPaused: (paused: boolean) => void;
playwrightSetSources: (sources: Source[]) => void;
@ -46,7 +46,7 @@ export class EmptyRecorderApp extends EventEmitter implements IRecorderApp {
async close(): Promise<void> {}
async setPaused(paused: boolean): Promise<void> {}
async setMode(mode: Mode): Promise<void> {}
async setFileIfNeeded(file: string): Promise<void> {}
async setFile(file: string): Promise<void> {}
async setSelector(selector: string, userGesture?: boolean): Promise<void> {}
async updateCallLogs(callLogs: CallLog[]): Promise<void> {}
async setSources(sources: Source[]): Promise<void> {}
@ -144,9 +144,9 @@ export class RecorderApp extends EventEmitter implements IRecorderApp {
}).toString(), { isFunction: true }, mode).catch(() => {});
}
async setFileIfNeeded(file: string): Promise<void> {
async setFile(file: string): Promise<void> {
await this._page.mainFrame().evaluateExpression(((file: string) => {
window.playwrightSetFileIfNeeded(file);
window.playwrightSetFile(file);
}).toString(), { isFunction: true }, file).catch(() => {});
}

2
packages/playwright-core/src/server/recorder/recorderFrontend.ts
View file

@ -26,7 +26,7 @@ export interface IRecorderApp extends EventEmitter {
close(): Promise<void>;
setPaused(paused: boolean): Promise<void>;
setMode(mode: Mode): Promise<void>;
setFileIfNeeded(file: string): Promise<void>;
setFile(file: string): Promise<void>;
setSelector(selector: string, userGesture?: boolean): Promise<void>;
updateCallLogs(callLogs: CallLog[]): Promise<void>;
setSources(sources: Source[]): Promise<void>;

2
packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
View file

@ -55,7 +55,7 @@ export class RecorderInTraceViewer extends EventEmitter implements IRecorderApp
this._transport.sendEvent?.('setMode', { mode });
}
async setFileIfNeeded(file: string): Promise<void> {
async setFile(file: string): Promise<void> {
this._transport.sendEvent?.('setFileIfNeeded', { file });
}

26
packages/recorder/src/recorder.tsx
View file

@ -27,14 +27,6 @@ import { asLocator } from '@isomorphic/locatorGenerators';
import { toggleTheme } from '@web/theme';
import { copy } from '@web/uiUtils';
declare global {
interface Window {
playwrightSetFileIfNeeded: (file: string) => void;
playwrightSetSelector: (selector: string, focus?: boolean) => void;
dispatch(data: any): Promise<void>;
}
}
export interface RecorderProps {
sources: Source[],
paused: boolean,
@ -56,7 +48,13 @@ export const Recorder: React.FC<RecorderProps> = ({
setFileId(sources[0].id);
}, [fileId, sources]);
const source: Source = sources.find(s => s.id === fileId) || {
const source = React.useMemo(() => {
if (fileId) {
const source = sources.find(s => s.id === fileId);
if (source)
return source;
}
const source: Source = {
id: 'default',
isRecorded: false,
text: '',
@ -64,6 +62,8 @@ export const Recorder: React.FC<RecorderProps> = ({
label: '',
highlight: []
};
return source;
}, [sources, fileId]);
const [locator, setLocator] = React.useState('');
window.playwrightSetSelector = (selector: string, focus?: boolean) => {
@ -73,13 +73,7 @@ export const Recorder: React.FC<RecorderProps> = ({
setLocator(asLocator(language, selector));
};
window.playwrightSetFileIfNeeded = (value: string) => {
const newSource = sources.find(s => s.id === value);
// Do not forcefully switch between two recorded sources, because
// user did explicitly choose one.
if (newSource && !newSource.isRecorded || !source.isRecorded)
setFileId(value);
};
window.playwrightSetFile = setFileId;
const messagesEndRef = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(() => {

2
packages/recorder/src/recorderTypes.ts
View file

@ -96,7 +96,7 @@ declare global {
playwrightSetSources: (sources: Source[]) => void;
playwrightSetOverlayVisible: (visible: boolean) => void;
playwrightUpdateLogs: (callLogs: CallLog[]) => void;
playwrightSetFileIfNeeded: (file: string) => void;
playwrightSetFile: (file: string) => void;
playwrightSetSelector: (selector: string, focus?: boolean) => void;
playwrightSourcesEchoForTest: Source[];
dispatch(data: any): Promise<void>;