kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: render recorder placeholders (#33548)

This commit is contained in:
Pavel Feldman 2024-11-11 16:38:02 -08:00 committed by GitHub
parent d8a98a2bf5
commit e534fba60f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/recorder/src/recorder.tsx
View File

@ -122,6 +122,9 @@ export const Recorder: React.FC<RecorderProps> = ({
if (!errors.length) if (!errors.length)
window.dispatch({ event: 'highlightRequested', params: { ariaSnapshot: fragment } }); window.dispatch({ event: 'highlightRequested', params: { ariaSnapshot: fragment } });
}, [mode]); }, [mode]);
const isRecording = mode === 'recording' || mode === 'recording-inspecting';
const locatorPlaceholder = isRecording ? '// Unavailable while recording' : (locator ? undefined : '// Pick element or type locator');
const ariaPlaceholder = isRecording ? '# Unavailable while recording' : (ariaSnapshot ? undefined : '# Pick element or type snapshot');
return <div className='recorder'> return <div className='recorder'>
<Toolbar> <Toolbar>
@ -188,7 +191,7 @@ export const Recorder: React.FC<RecorderProps> = ({
{ {
id: 'locator', id: 'locator',
title: 'Locator', title: 'Locator',
render: () => <CodeMirrorWrapper text={locator} language={source.language} readOnly={false} focusOnChange={true} onChange={onEditorChange} wrapLines={true} /> render: () => <CodeMirrorWrapper text={locatorPlaceholder || locator} language={source.language} readOnly={isRecording} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
}, },
{ {
id: 'log', id: 'log',
@ -198,7 +201,7 @@ export const Recorder: React.FC<RecorderProps> = ({
{ {
id: 'aria', id: 'aria',
title: 'Aria snapshot', title: 'Aria snapshot',
render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} language={'yaml'} readOnly={false} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={false} /> render: () => <CodeMirrorWrapper text={ariaPlaceholder || ariaSnapshot || ''} language={'yaml'} readOnly={isRecording} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
}, },
]} ]}
selectedTab={selectedTab} selectedTab={selectedTab}

1
tests/library/inspector/cli-codegen-aria.spec.ts
View File

@ -64,6 +64,7 @@ test.describe(() => {
test('should inspect aria snapshot', async ({ openRecorder }) => { test('should inspect aria snapshot', async ({ openRecorder }) => {
const { recorder } = await openRecorder(); const { recorder } = await openRecorder();
await recorder.setContentAndWait(`<main><button>Submit</button></main>`); await recorder.setContentAndWait(`<main><button>Submit</button></main>`);
await recorder.recorderPage.getByRole('button', { name: 'Record' }).click();
await recorder.page.click('x-pw-tool-item.pick-locator'); await recorder.page.click('x-pw-tool-item.pick-locator');
await recorder.page.hover('button'); await recorder.page.hover('button');
await recorder.trustedClick(); await recorder.trustedClick();

4
tests/library/inspector/pause.spec.ts
View File

@ -418,6 +418,8 @@ it.describe('pause', () => {
const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: '); const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: ');
await recorderPage.getByText('Locator', { exact: true }).click(); await recorderPage.getByText('Locator', { exact: true }).click();
await recorderPage.locator('.tabbed-pane .CodeMirror').click(); await recorderPage.locator('.tabbed-pane .CodeMirror').click();
await recorderPage.keyboard.press('ControlOrMeta+A');
await recorderPage.keyboard.press('Backspace');
await recorderPage.keyboard.type('getByText(\'Submit\')'); await recorderPage.keyboard.type('getByText(\'Submit\')');
const box1 = await box1Promise; const box1 = await box1Promise;
@ -441,6 +443,8 @@ it.describe('pause', () => {
const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: '); const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: ');
await recorderPage.getByText('Locator', { exact: true }).click(); await recorderPage.getByText('Locator', { exact: true }).click();
await recorderPage.locator('.tabbed-pane .CodeMirror').click(); await recorderPage.locator('.tabbed-pane .CodeMirror').click();
await recorderPage.keyboard.press('ControlOrMeta+A');
await recorderPage.keyboard.press('Backspace');
await recorderPage.keyboard.type('GetByText("Submit")'); await recorderPage.keyboard.type('GetByText("Submit")');
const box1 = await box1Promise; const box1 = await box1Promise;