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

fix: fix locator picker in Trace (#23820)

Browse source 
- make sure links are not clickable with enabled locator picker
- make sure locator picker state is preserved when switching actions
This commit is contained in:
Andrey Lushnikov 2023-06-20 11:39:21 -07:00 committed by GitHub
parent 270135faaf
commit 1736479e41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/trace-viewer/src/ui/snapshotTab.tsx
View file

@ -160,14 +160,16 @@ export const SnapshotTab: React.FunctionComponent<{
testIdAttributeName={testIdAttributeName} testIdAttributeName={testIdAttributeName}
highlightedLocator={highlightedLocator} highlightedLocator={highlightedLocator}
setHighlightedLocator={setHighlightedLocator} setHighlightedLocator={setHighlightedLocator}
iframe={iframeRef0.current} /> iframe={iframeRef0.current}
iteration={loadingRef.current.iteration} />
<InspectModeController <InspectModeController
isInspecting={isInspecting} isInspecting={isInspecting}
sdkLanguage={sdkLanguage} sdkLanguage={sdkLanguage}
testIdAttributeName={testIdAttributeName} testIdAttributeName={testIdAttributeName}
highlightedLocator={highlightedLocator} highlightedLocator={highlightedLocator}
setHighlightedLocator={setHighlightedLocator} setHighlightedLocator={setHighlightedLocator}
iframe={iframeRef1.current} /> iframe={iframeRef1.current}
iteration={loadingRef.current.iteration} />
<Toolbar> <Toolbar>
<ToolbarButton title='Pick locator' disabled={!popoutUrl} toggled={pickerVisible} onClick={() => { <ToolbarButton title='Pick locator' disabled={!popoutUrl} toggled={pickerVisible} onClick={() => {
setPickerVisible(!pickerVisible); setPickerVisible(!pickerVisible);
@ -251,7 +253,8 @@ export const InspectModeController: React.FunctionComponent<{
testIdAttributeName: string, testIdAttributeName: string,
highlightedLocator: string, highlightedLocator: string,
setHighlightedLocator: (locator: string) => void, setHighlightedLocator: (locator: string) => void,
}> = ({ iframe, isInspecting, sdkLanguage, testIdAttributeName, highlightedLocator, setHighlightedLocator }) => { iteration: number,
}> = ({ iframe, isInspecting, sdkLanguage, testIdAttributeName, highlightedLocator, setHighlightedLocator, iteration }) => {
React.useEffect(() => { React.useEffect(() => {
const win = iframe?.contentWindow as any; const win = iframe?.contentWindow as any;
let recorder: Recorder | undefined; let recorder: Recorder | undefined;
@ -269,7 +272,6 @@ export const InspectModeController: React.FunctionComponent<{
const injectedScript = new InjectedScript(win, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []); const injectedScript = new InjectedScript(win, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
recorder = new Recorder(injectedScript, { recorder = new Recorder(injectedScript, {
async setSelector(selector: string) { async setSelector(selector: string) {
recorder!.setUIState({ mode: 'none', language: sdkLanguage, testIdAttributeName });
setHighlightedLocator(asLocator('javascript', selector, false /* isFrameLocator */, true /* playSafe */)); setHighlightedLocator(asLocator('javascript', selector, false /* isFrameLocator */, true /* playSafe */));
} }
}); });
@ -282,7 +284,7 @@ export const InspectModeController: React.FunctionComponent<{
language: sdkLanguage, language: sdkLanguage,
testIdAttributeName, testIdAttributeName,
}); });
}, [iframe, isInspecting, highlightedLocator, setHighlightedLocator, sdkLanguage, testIdAttributeName]); }, [iframe, isInspecting, highlightedLocator, setHighlightedLocator, sdkLanguage, testIdAttributeName, iteration]);
return <></>; return <></>;
}; };