Proof of Concept for E2E tests using playwright (#22754)

packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+
+test.describe('Testing Todo-List App', () => {
+  let page, frameElementHandle, frame;
+  test.beforeAll(async ({browser}) => {
+    page = await browser.newPage();
+    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
+    await page.waitForSelector('iframe#target');
+    frameElementHandle = await page.$('#target');
+    frame = await frameElementHandle.contentFrame();
+  });
+
+  test('The Todo List should contain 3 items by default', async () => {
+    const list = frame.locator('.listitem');
+    await expect(list).toHaveCount(3);
+  });
+
+  test('Add another item Fourth to list', async () => {
+    await frame.type('.input', 'Fourth');
+    await frame.click('button.iconbutton');
+    const listItems = await frame.locator('.label');
+    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
+  });
+
+  test('Inspecting list elements with devtools', async () => {
+    // Component props are used as string in devtools.
+    const listItemsProps = [
+      '',
+      '{id: 1, isComplete: true, text: "First"}',
+      '{id: 2, isComplete: true, text: "Second"}',
+      '{id: 3, isComplete: false, text: "Third"}',
+      '{id: 4, isComplete: false, text: "Fourth"}',
+    ];
+    const countOfItems = await frame.$$eval('.listitem', el => el.length);
+    // For every item in list click on devtools inspect icon
+    // click on the list item to quickly navigate to the list item component in devtools
+    // comparing displayed props with the array of props.
+    for (let i = 1; i <= countOfItems; ++i) {
+      await page.click('[class^=ToggleContent]', {delay: 100});
+      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
+      await page.waitForSelector('span.Value___tNzum');
+      const text = await page.innerText('span[class^=Value]');
+      await expect(text).toEqual(listItemsProps[i]);
+    }
+  });
+});

packages/react-devtools-inline/package.json

@@ -19,7 +19,8 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
     "prepublish": "yarn run build",
-    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
+    "test:e2e": "playwright test --config=playwright.config.js"
   },
   "dependencies": {
     "source-map-js": "^0.6.2",
@@ -33,6 +34,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@playwright/test": "^1.16.3",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",

packages/react-devtools-inline/playwright.config.js

@@ -0,0 +1,11 @@
+const config = {
+  use: {
+    headless: false,
+    browserName: 'chromium',
+    launchOptions: {
+      slowMo: 100,
+    },
+  },
+};
+
+module.exports = config;

packages/react-devtools-shell/webpack.config.js

@@ -107,7 +107,7 @@ const config = {
             options: {
               sourceMap: true,
               modules: true,
-              localIdentName: '[local]___[hash:base64:5]',
+              localIdentName: '[local]',
             },
           },
         ],