From fac814e9b71711edaae0a46f3cd1f7ddc97b346e Mon Sep 17 00:00:00 2001 From: akgupta0777 Date: Sat, 13 Nov 2021 22:52:19 +0530 Subject: [PATCH 1/3] Proof of Concept for E2E tests using playwright --- .../__tests__/End-to-End/todoList.test.js | 50 +++++++++++++++++++ packages/react-devtools-inline/package.json | 4 +- .../playwright.config.js | 11 ++++ .../react-devtools-shell/webpack.config.js | 2 +- 4 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 packages/react-devtools-inline/__tests__/End-to-End/todoList.test.js create mode 100644 packages/react-devtools-inline/playwright.config.js diff --git a/packages/react-devtools-inline/__tests__/End-to-End/todoList.test.js b/packages/react-devtools-inline/__tests__/End-to-End/todoList.test.js new file mode 100644 index 0000000000000..9fbbce0f47df6 --- /dev/null +++ b/packages/react-devtools-inline/__tests__/End-to-End/todoList.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]); + } + }); +}); diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index b814eacd4d193..7eaa52635edd8 100644 --- a/packages/react-devtools-inline/package.json +++ b/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": "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", diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js new file mode 100644 index 0000000000000..58c951723270f --- /dev/null +++ b/packages/react-devtools-inline/playwright.config.js @@ -0,0 +1,11 @@ +const config = { + use: { + headless: false, + browserName: 'chromium', + launchOptions: { + slowMo: 100, + }, + }, +}; + +module.exports = config; diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js index 18c55d1d8b740..cc846954e901b 100644 --- a/packages/react-devtools-shell/webpack.config.js +++ b/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]', }, }, ], From 5bdcd715ddb0a0bddce400b55c09536f134c8fa1 Mon Sep 17 00:00:00 2001 From: akgupta0777 Date: Mon, 15 Nov 2021 23:09:01 +0530 Subject: [PATCH 2/3] Renamed folder structure --- .../todoList.test.js => __e2e__/inspecting-props.test.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/react-devtools-inline/__tests__/{End-to-End/todoList.test.js => __e2e__/inspecting-props.test.js} (100%) diff --git a/packages/react-devtools-inline/__tests__/End-to-End/todoList.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js similarity index 100% rename from packages/react-devtools-inline/__tests__/End-to-End/todoList.test.js rename to packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js From e52e4f52dc8c11eea0fb9bb2c38832127ebd609b Mon Sep 17 00:00:00 2001 From: akgupta0777 Date: Mon, 15 Nov 2021 23:12:37 +0530 Subject: [PATCH 3/3] Modified test script --- packages/react-devtools-inline/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 7eaa52635edd8..f6468fea3c28a 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -20,7 +20,7 @@ "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", - "test": "playwright test --config=playwright.config.js" + "test:e2e": "playwright test --config=playwright.config.js" }, "dependencies": { "source-map-js": "^0.6.2",