Skip to content

Commit

Permalink
Proof of Concept for E2E tests using playwright (facebook#22754)
Browse files Browse the repository at this point in the history
  • Loading branch information
akgupta0777 authored and zhengjitf committed Apr 15, 2022
1 parent 7684c18 commit 75c4e32
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -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]);
}
});
});
4 changes: 3 additions & 1 deletion packages/react-devtools-inline/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions packages/react-devtools-inline/playwright.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const config = {
use: {
headless: false,
browserName: 'chromium',
launchOptions: {
slowMo: 100,
},
},
};

module.exports = config;
2 changes: 1 addition & 1 deletion packages/react-devtools-shell/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const config = {
options: {
sourceMap: true,
modules: true,
localIdentName: '[local]___[hash:base64:5]',
localIdentName: '[local]',
},
},
],
Expand Down

0 comments on commit 75c4e32

Please sign in to comment.