yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: allow editing locator while matching text (#28115)

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

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

@ -55,17 +55,6 @@ x-pw-dialog-body {
flex: auto; flex: auto;
} }
x-pw-dialog-body label {
margin: 10px;
display: flex;
align-items: center;
cursor: pointer;
}
x-pw-dialog-body input {
cursor: pointer;
}
x-pw-highlight { x-pw-highlight {
position: absolute; position: absolute;
top: 0; top: 0;
@ -221,7 +210,7 @@ textarea.text-editor {
font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;
flex: auto; flex: auto;
border: none; border: none;
margin: 10px; margin: 6px;
color: #333; color: #333;
outline: 1px solid transparent !important; outline: 1px solid transparent !important;
} }
@ -252,6 +241,11 @@ x-locator-editor {
height: 60px; height: 60px;
padding: 4px; padding: 4px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
outline: 1px solid transparent;
}
x-locator-editor.does-not-match {
outline: 1px solid red;
} }
.CodeMirror { .CodeMirror {

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

@ -572,8 +572,7 @@ class TextAssertionTool implements RecorderTool {
} }
private _showDialog() { private _showDialog() {
const target = this._hoverHighlight?.elements[0]; if (!this._hoverHighlight?.elements[0])
if (!target)
return; return;
this._action = this._generateAction(); this._action = this._generateAction();
if (!this._action) if (!this._action)
@ -616,12 +615,14 @@ class TextAssertionTool implements RecorderTool {
cm.on('change', () => { cm.on('change', () => {
if (this._action) { if (this._action) {
const selector = locatorOrSelectorAsSelector(this._recorder.state.language, cm.getValue(), this._recorder.state.testIdAttributeName); const selector = locatorOrSelectorAsSelector(this._recorder.state.language, cm.getValue(), this._recorder.state.testIdAttributeName);
const model: HighlightModel = { const elements = this._recorder.injectedScript.querySelectorAll(parseSelector(selector), this._recorder.document);
cmElement.classList.toggle('does-not-match', !elements.length);
this._hoverHighlight = elements.length ? {
selector, selector,
elements: this._recorder.injectedScript.querySelectorAll(parseSelector(selector), this._recorder.document), elements,
}; } : null;
this._action.selector = selector; this._action.selector = selector;
this._recorder.updateHighlight(model, true); this._recorder.updateHighlight(this._hoverHighlight, true);
} }
}); });
@ -635,6 +636,9 @@ class TextAssertionTool implements RecorderTool {
const updateAndValidate = () => { const updateAndValidate = () => {
const newValue = normalizeWhiteSpace(textElement.value); const newValue = normalizeWhiteSpace(textElement.value);
const target = this._hoverHighlight?.elements[0];
if (!target)
return;
action.text = newValue; action.text = newValue;
const targetText = normalizeWhiteSpace(elementText(this._textCache, target).full); const targetText = normalizeWhiteSpace(elementText(this._textCache, target).full);
const matches = action.substring ? newValue && targetText.includes(newValue) : targetText === newValue; const matches = action.substring ? newValue && targetText.includes(newValue) : targetText === newValue;
@ -678,8 +682,7 @@ class TextAssertionTool implements RecorderTool {
checkboxElement.type = 'checkbox'; checkboxElement.type = 'checkbox';
checkboxElement.checked = action.checked; checkboxElement.checked = action.checked;
checkboxElement.addEventListener('change', () => { checkboxElement.addEventListener('change', () => {
if (action.name === 'assertChecked') action.checked = checkboxElement.checked;
action.checked = checkboxElement.checked;
}); });
bodyElement.appendChild(labelElement); bodyElement.appendChild(labelElement);
elementToFocus = labelElement; elementToFocus = labelElement;