microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-07 11:46:42 +03:00
Code Issues Projects Releases Wiki Activity

chore: flag text mismatch when editing (#28106)

Browse Source
This commit is contained in:
Pavel Feldman 2023-11-13 11:44:06 -08:00 committed by GitHub
parent 40b8df7217
commit db38f0d2df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/playwright-core/src/server/injected/highlight.css
View File

@ -223,10 +223,11 @@ textarea.text-editor {
border: none; border: none;
margin: 10px; margin: 10px;
color: #333; color: #333;
outline: 1px solid transparent !important;
} }
textarea.text-editor:focus { textarea.text-editor.does-not-match {
outline: none; outline: 1px solid red !important;
} }
x-div { x-div {

17
packages/playwright-core/src/server/injected/recorder.ts
View File

@ -22,6 +22,7 @@ import type { Mode, OverlayState, UIState } from '@recorder/recorderTypes';
import { Highlight, type HighlightOptions } from '../injected/highlight'; import { Highlight, type HighlightOptions } from '../injected/highlight';
import { isInsideScope } from './domUtils'; import { isInsideScope } from './domUtils';
import { elementText } from './selectorUtils'; import { elementText } from './selectorUtils';
import type { ElementText } from './selectorUtils';
import { asLocator } from '../../utils/isomorphic/locatorGenerators'; import { asLocator } from '../../utils/isomorphic/locatorGenerators';
import type { Language } from '../../utils/isomorphic/locatorGenerators'; import type { Language } from '../../utils/isomorphic/locatorGenerators';
import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser'; import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser';
@ -467,6 +468,7 @@ class TextAssertionTool implements RecorderTool {
private _acceptButton: HTMLElement; private _acceptButton: HTMLElement;
private _cancelButton: HTMLElement; private _cancelButton: HTMLElement;
private _keyboardListener: ((event: KeyboardEvent) => void) | undefined; private _keyboardListener: ((event: KeyboardEvent) => void) | undefined;
private _textCache = new Map<Element | ShadowRoot, ElementText>();
constructor(private _recorder: Recorder) { constructor(private _recorder: Recorder) {
this._acceptButton = this._recorder.document.createElement('x-pw-tool-item'); this._acceptButton = this._recorder.document.createElement('x-pw-tool-item');
@ -514,6 +516,7 @@ class TextAssertionTool implements RecorderTool {
} }
private _generateAction(): actions.AssertAction | null { private _generateAction(): actions.AssertAction | null {
this._textCache.clear();
const target = this._hoverHighlight?.elements[0]; const target = this._hoverHighlight?.elements[0];
if (!target) if (!target)
return null; return null;
@ -541,7 +544,7 @@ class TextAssertionTool implements RecorderTool {
name: 'assertText', name: 'assertText',
selector, selector,
signals: [], signals: [],
text: target.textContent!, text: normalizeWhiteSpace(elementText(this._textCache, target).full),
substring: true, substring: true,
}; };
} }
@ -626,12 +629,16 @@ class TextAssertionTool implements RecorderTool {
textElement.classList.add('text-editor'); textElement.classList.add('text-editor');
textElement.addEventListener('input', () => { textElement.addEventListener('input', () => {
if (this._action?.name === 'assertText') if (this._action?.name === 'assertText') {
this._action.text = normalizeWhiteSpace(elementText(new Map(), textElement).full); const newValue = normalizeWhiteSpace(textElement.value);
if (this._action?.name === 'assertChecked') this._action.text = newValue;
const targetText = normalizeWhiteSpace(elementText(this._textCache, target).full);
textElement.classList.toggle('does-not-match', !!newValue && !targetText.includes(newValue));
} else if (this._action?.name === 'assertChecked') {
this._action.checked = textElement.value === 'true'; this._action.checked = textElement.value === 'true';
if (this._action?.name === 'assertValue') } else if (this._action?.name === 'assertValue') {
this._action.value = textElement.value; this._action.value = textElement.value;
}
}); });
bodyElement.appendChild(textElement); bodyElement.appendChild(textElement);
elementToFocus = textElement; elementToFocus = textElement;