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 asserting substring (#28111)

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

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

@ -115,10 +115,10 @@ x-pw-tool-gripper > x-div {
background-color: #555555; background-color: #555555;
} }
x-pw-tool-label { x-pw-tools-list > label {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 10px; margin: 0 10px;
user-select: none; user-select: none;
} }

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

@ -539,10 +539,13 @@ class TextAssertionTool implements RecorderTool {
}; };
} }
} else { } else {
const { selector } = generateSelector(this._recorder.injectedScript, target, { testIdAttributeName: this._recorder.state.testIdAttributeName, forTextExpect: true }); this._hoverHighlight = generateSelector(this._recorder.injectedScript, target, { testIdAttributeName: this._recorder.state.testIdAttributeName, forTextExpect: true });
// forTextExpect can update the target, re-highlight it.
this._recorder.updateHighlight(this._hoverHighlight, true, { color: '#8acae480' });
return { return {
name: 'assertText', name: 'assertText',
selector, selector: this._hoverHighlight.selector,
signals: [], signals: [],
text: normalizeWhiteSpace(elementText(this._textCache, target).full), text: normalizeWhiteSpace(elementText(this._textCache, target).full),
substring: true, substring: true,
@ -588,6 +591,7 @@ class TextAssertionTool implements RecorderTool {
return; return;
} }
}; };
this._recorder.document.addEventListener('keydown', this._keyboardListener, true); this._recorder.document.addEventListener('keydown', this._keyboardListener, true);
const toolbarElement = this._recorder.document.createElement('x-pw-tools-list'); const toolbarElement = this._recorder.document.createElement('x-pw-tools-list');
toolbarElement.appendChild(this._createLabel(this._action)); toolbarElement.appendChild(this._createLabel(this._action));
@ -622,36 +626,60 @@ class TextAssertionTool implements RecorderTool {
}); });
let elementToFocus: HTMLElement | null = null; let elementToFocus: HTMLElement | null = null;
if (this._action.name !== 'assertChecked') { const action = this._action;
if (action.name === 'assertText') {
const textElement = this._recorder.document.createElement('textarea');
textElement.setAttribute('spellcheck', 'false');
textElement.value = this._renderValue(this._action);
textElement.classList.add('text-editor');
const updateAndValidate = () => {
const newValue = normalizeWhiteSpace(textElement.value);
action.text = newValue;
const targetText = normalizeWhiteSpace(elementText(this._textCache, target).full);
const matches = action.substring ? newValue && targetText.includes(newValue) : targetText === newValue;
textElement.classList.toggle('does-not-match', !matches);
};
textElement.addEventListener('input', updateAndValidate);
bodyElement.appendChild(textElement);
// Add a toolbar substring checkbox.
const substringElement = this._recorder.document.createElement('label');
substringElement.style.cursor = 'pointer';
const checkboxElement = this._recorder.document.createElement('input');
substringElement.appendChild(checkboxElement);
substringElement.appendChild(this._recorder.document.createTextNode('Substring'));
checkboxElement.type = 'checkbox';
checkboxElement.style.cursor = 'pointer';
checkboxElement.checked = action.substring;
checkboxElement.addEventListener('change', () => {
action.substring = checkboxElement.checked;
updateAndValidate();
});
toolbarElement.insertBefore(substringElement, this._acceptButton);
elementToFocus = textElement;
} else if (action.name === 'assertValue') {
const textElement = this._recorder.document.createElement('textarea'); const textElement = this._recorder.document.createElement('textarea');
textElement.setAttribute('spellcheck', 'false'); textElement.setAttribute('spellcheck', 'false');
textElement.value = this._renderValue(this._action); textElement.value = this._renderValue(this._action);
textElement.classList.add('text-editor'); textElement.classList.add('text-editor');
textElement.addEventListener('input', () => { textElement.addEventListener('input', () => {
if (this._action?.name === 'assertText') { action.value = textElement.value;
const newValue = normalizeWhiteSpace(textElement.value);
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';
} else if (this._action?.name === 'assertValue') {
this._action.value = textElement.value;
}
}); });
bodyElement.appendChild(textElement); bodyElement.appendChild(textElement);
elementToFocus = textElement; elementToFocus = textElement;
} else { } else if (action.name === 'assertChecked') {
const labelElement = this._recorder.document.createElement('label'); const labelElement = this._recorder.document.createElement('label');
labelElement.textContent = 'Value:'; labelElement.textContent = 'Value:';
const checkboxElement = this._recorder.document.createElement('input'); const checkboxElement = this._recorder.document.createElement('input');
labelElement.appendChild(checkboxElement); labelElement.appendChild(checkboxElement);
checkboxElement.type = 'checkbox'; checkboxElement.type = 'checkbox';
checkboxElement.checked = this._action.checked; checkboxElement.checked = action.checked;
checkboxElement.addEventListener('change', () => { checkboxElement.addEventListener('change', () => {
if (this._action?.name === 'assertChecked') if (action.name === 'assertChecked')
this._action.checked = checkboxElement.checked; action.checked = checkboxElement.checked;
}); });
bodyElement.appendChild(labelElement); bodyElement.appendChild(labelElement);
elementToFocus = labelElement; elementToFocus = labelElement;
@ -667,7 +695,7 @@ class TextAssertionTool implements RecorderTool {
} }
private _createLabel(action: actions.AssertAction) { private _createLabel(action: actions.AssertAction) {
const labelElement = this._recorder.document.createElement('x-pw-tool-label'); const labelElement = this._recorder.document.createElement('label');
labelElement.textContent = action.name === 'assertText' ? 'Assert text' : action.name === 'assertValue' ? 'Assert value' : 'Assert checked'; labelElement.textContent = action.name === 'assertText' ? 'Assert text' : action.name === 'assertValue' ? 'Assert value' : 'Assert checked';
return labelElement; return labelElement;
} }