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

chore: explore yield typed locator (#18188)

Browse source 
Fixes https://github.com/microsoft/playwright/issues/18018
This commit is contained in:
Pavel Feldman 2022-10-19 16:05:52 -04:00 committed by GitHub
parent 69092b153a
commit 909eda2432
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,7 @@ import { ToolbarButton } from '@web/components/toolbarButton';
import * as React from 'react'; import * as React from 'react';
import { CallLogView } from './callLog'; import { CallLogView } from './callLog';
import './recorder.css'; import './recorder.css';
import { asLocator } from '@isomorphic/locatorGenerators';
declare global { declare global {
interface Window { interface Window {
@ -36,7 +37,6 @@ export interface RecorderProps {
paused: boolean, paused: boolean,
log: Map<string, CallLog>, log: Map<string, CallLog>,
mode: Mode, mode: Mode,
initialSelector?: string,
} }
export const Recorder: React.FC<RecorderProps> = ({ export const Recorder: React.FC<RecorderProps> = ({
@ -44,12 +44,12 @@ export const Recorder: React.FC<RecorderProps> = ({
paused, paused,
log, log,
mode, mode,
initialSelector,
}) => { }) => {
const [selector, setSelector] = React.useState(initialSelector || ''); const [locator, setLocator] = React.useState('');
const [focusSelectorInput, setFocusSelectorInput] = React.useState(false); const [focusSelectorInput, setFocusSelectorInput] = React.useState(false);
window.playwrightSetSelector = (selector: string, focus?: boolean) => { window.playwrightSetSelector = (selector: string, focus?: boolean) => {
setSelector(selector); const language = sources[0]?.language || 'javascript';
setLocator(asLocator(language, selector));
setFocusSelectorInput(!!focus); setFocusSelectorInput(!!focus);
}; };
@ -145,8 +145,8 @@ export const Recorder: React.FC<RecorderProps> = ({
<ToolbarButton icon='microscope' title='Explore' toggled={mode === 'inspecting'} onClick={() => { <ToolbarButton icon='microscope' title='Explore' toggled={mode === 'inspecting'} onClick={() => {
window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' } }).catch(() => { }); window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' } }).catch(() => { });
}}>Explore</ToolbarButton> }}>Explore</ToolbarButton>
<input ref={selectorInputRef} className='selector-input' placeholder='Playwright Selector' value={selector} disabled={mode !== 'none'} onChange={event => { <input ref={selectorInputRef} className='selector-input' placeholder='Playwright Selector' spellCheck='false' value={locator} disabled={mode !== 'none'} onChange={event => {
setSelector(event.target.value); setLocator(asLocator(source.language, event.target.value));
window.dispatch({ event: 'selectorUpdated', params: { selector: event.target.value } }); window.dispatch({ event: 'selectorUpdated', params: { selector: event.target.value } });
}} /> }} />
<ToolbarButton icon='files' title='Copy' onClick={() => { <ToolbarButton icon='files' title='Copy' onClick={() => {