Skip to content

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 7, 2024
+26 −6
Merged

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions packages/react-devtools-inline/__tests__/__e2e__/components.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ test.describe('Components', () => {
const isEditableValue = semver.gte(config.use.react_version, '16.8.0');

// Then read the inspected values.
const [propName, propValue, sourceText] = await page.evaluate(
const [propName, propValue] = await page.evaluate(
isEditable => {
const {createTestNameSelector, findAllNodes} =
window.REACT_DOM_DEVTOOLS;
Expand All @@ -85,21 +85,41 @@ test.describe('Components', () => {
createTestNameSelector('InspectedElementPropsTree'),
createTestNameSelector(selectorValue),
])[0];
const source = findAllNodes(container, [
createTestNameSelector('InspectedElementView-Source'),
])[0];
const value = isEditable.value
? valueElement.value
: valueElement.innerText;

return [name, value, source.innerText];
return [name, value];
},
{name: isEditableName, value: isEditableValue}
);

expect(propName).toBe('label');
expect(propValue).toBe('"one"');
expect(sourceText).toMatch(/e2e-app[a-zA-Z]*\.js/);
});

test('Should allow inspecting source of the element', async () => {
// Source inspection is available only in modern renderer.
runOnlyForReactRange('>=16.8');

// Select the first list item in DevTools.
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');

// Then read the inspected values.
const sourceText = await page.evaluate(() => {
const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
Copy link
Contributor

@EdmondChuiHW EdmondChuiHW Mar 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is an E2E test, is there a way to do this without reaching into the internals?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, there is definitely a way to just use query selectors, but this is probably required for more complex cases with inputs

Internals are injected in

react/packages/react-devtools-shell/src/e2e/devtools.js

Lines 60 to 61 in 850fac4

// ReactDOM Test Selector APIs used by Playwright e2e tests
window.parent.REACT_DOM_DEVTOOLS = ReactDOM;

This was added in #22978, I think #22978 (comment) is one of the reasons.

const container = document.getElementById('devtools');

const source = findAllNodes(container, [
createTestNameSelector('InspectedElementView-Source'),
])[0];

return source.innerText;
});

// If React version is specified, the e2e-regression.html page will be used
// If not, then e2e.html, see playwright.config.js, how url is constructed
expect(sourceText).toMatch(/e2e-app[\-a-zA-Z]*\.js/);
});

test('should allow props to be edited', async () => {
Expand Down