microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-11-28 09:23:42 +03:00
Code Issues Projects Releases Wiki Activity

chore: render recorder placeholders (#33548)

Browse Source
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)
window.dispatch({ event: 'highlightRequested', params: { ariaSnapshot: fragment } });
}, [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'>
<Toolbar>
@ -188,7 +191,7 @@ export const Recorder: React.FC<RecorderProps> = ({
{
id: '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',
@ -198,7 +201,7 @@ export const Recorder: React.FC<RecorderProps> = ({
{
id: 'aria',
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}

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

@ -64,6 +64,7 @@ test.describe(() => {
test('should inspect aria snapshot', async ({ openRecorder }) => {
const { recorder } = await openRecorder();
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.hover('button');
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: ');
await recorderPage.getByText('Locator', { exact: true }).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\')');
const box1 = await box1Promise;
@ -441,6 +443,8 @@ it.describe('pause', () => {
const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: ');
await recorderPage.getByText('Locator', { exact: true }).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")');
const box1 = await box1Promise;