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

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

View File

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

View File

@ -572,8 +572,7 @@ class TextAssertionTool implements RecorderTool {
}
private _showDialog() {
const target = this._hoverHighlight?.elements[0];
if (!target)
if (!this._hoverHighlight?.elements[0])
return;
this._action = this._generateAction();
if (!this._action)
@ -616,12 +615,14 @@ class TextAssertionTool implements RecorderTool {
cm.on('change', () => {
if (this._action) {
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,
elements: this._recorder.injectedScript.querySelectorAll(parseSelector(selector), this._recorder.document),
};
elements,
} : null;
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 newValue = normalizeWhiteSpace(textElement.value);
const target = this._hoverHighlight?.elements[0];
if (!target)
return;
action.text = newValue;
const targetText = normalizeWhiteSpace(elementText(this._textCache, target).full);
const matches = action.substring ? newValue && targetText.includes(newValue) : targetText === newValue;
@ -678,7 +682,6 @@ class TextAssertionTool implements RecorderTool {
checkboxElement.type = 'checkbox';
checkboxElement.checked = action.checked;
checkboxElement.addEventListener('change', () => {
if (action.name === 'assertChecked')
action.checked = checkboxElement.checked;
});
bodyElement.appendChild(labelElement);