fix: fix locator picker in Trace (#23820)

- 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

View File

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