Proof of Concept for E2E tests using playwright (#22754)
Abhay Gupta committed
Nov 16, 2021 at 03:14 UTC
ee8f146a61e628ba8da5bff414b0b1142b167426
4 files changed
+65
-2
packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
new
+50
@@ -0,0 +1,50 @@
1
+'use strict';
2
+
3
+const {test, expect} = require('@playwright/test');
4
+const config = require('../../playwright.config');
5
+test.use(config);
6
+
7
+test.describe('Testing Todo-List App', () => {
8
+ let page, frameElementHandle, frame;
9
+ test.beforeAll(async ({browser}) => {
10
+ page = await browser.newPage();
11
+ await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
12
+ await page.waitForSelector('iframe#target');
13
+ frameElementHandle = await page.$('#target');
14
+ frame = await frameElementHandle.contentFrame();
15
+ });
16
+
17
+ test('The Todo List should contain 3 items by default', async () => {
18
+ const list = frame.locator('.listitem');
19
+ await expect(list).toHaveCount(3);
20
+ });
21
+
22
+ test('Add another item Fourth to list', async () => {
23
+ await frame.type('.input', 'Fourth');
24
+ await frame.click('button.iconbutton');
25
+ const listItems = await frame.locator('.label');
26
+ await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
27
+ });
28
+
29
+ test('Inspecting list elements with devtools', async () => {
30
+ // Component props are used as string in devtools.
31
+ const listItemsProps = [
32
+ '',
33
+ '{id: 1, isComplete: true, text: "First"}',
34
+ '{id: 2, isComplete: true, text: "Second"}',
35
+ '{id: 3, isComplete: false, text: "Third"}',
36
+ '{id: 4, isComplete: false, text: "Fourth"}',
37
+ ];
38
+ const countOfItems = await frame.$$eval('.listitem', el => el.length);
39
+ // For every item in list click on devtools inspect icon
40
+ // click on the list item to quickly navigate to the list item component in devtools
41
+ // comparing displayed props with the array of props.
42
+ for (let i = 1; i <= countOfItems; ++i) {
43
+ await page.click('[class^=ToggleContent]', {delay: 100});
44
+ await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
45
+ await page.waitForSelector('span.Value___tNzum');
46
+ const text = await page.innerText('span[class^=Value]');
47
+ await expect(text).toEqual(listItemsProps[i]);
48
+ }
49
+ });
50
+});
packages/react-devtools-inline/package.json
+3
-1
@@ -19,7 +19,8 @@
19
"scripts": {
20
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
21
"prepublish": "yarn run build",
22
- "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
22
+ "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
23
+ "test:e2e": "playwright test --config=playwright.config.js"
24
},
25
"dependencies": {
26
"source-map-js": "^0.6.2",
@@ -33,6 +34,7 @@
34
"@babel/preset-env": "^7.11.0",
35
"@babel/preset-flow": "^7.10.4",
36
"@babel/preset-react": "^7.10.4",
37
+ "@playwright/test": "^1.16.3",
38
"babel-core": "^7.0.0-bridge",
39
"babel-eslint": "^9.0.0",
40
"babel-loader": "^8.0.4",
packages/react-devtools-inline/playwright.config.js
new
+11
@@ -0,0 +1,11 @@
1
+const config = {
2
+ use: {
3
+ headless: false,
4
+ browserName: 'chromium',
5
+ launchOptions: {
6
+ slowMo: 100,
7
+ },
8
+ },
9
+};
10
+
11
+module.exports = config;
packages/react-devtools-shell/webpack.config.js
+1
-1
@@ -107,7 +107,7 @@ const config = {
107
options: {
108
sourceMap: true,
109
modules: true,
110
- localIdentName: '[local]___[hash:base64:5]',
110
+ localIdentName: '[local]',
111
},
112
},
113
],