@wordpress/e2e-tests 7.0.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/config/performance-reporter.js +4 -2
- package/package.json +7 -7
- package/specs/editor/blocks/cover.test.js +0 -45
- package/specs/performance/front-end-block-theme.test.js +5 -10
- package/specs/performance/front-end-classic-theme.test.js +5 -10
- package/specs/performance/post-editor.test.js +24 -26
- package/specs/performance/site-editor.test.js +9 -13
- package/specs/performance/utils.js +17 -1
package/CHANGELOG.md
CHANGED
@@ -19,9 +19,11 @@ const success = chalk.bold.green;
|
|
19
19
|
|
20
20
|
class PerformanceReporter {
|
21
21
|
onTestResult( test ) {
|
22
|
-
const dirname = path.dirname( test.path );
|
23
22
|
const basename = path.basename( test.path, '.js' );
|
24
|
-
const filepath = path.join(
|
23
|
+
const filepath = path.join(
|
24
|
+
process.env.WP_ARTIFACTS_PATH,
|
25
|
+
basename + '.performance-results.json'
|
26
|
+
);
|
25
27
|
|
26
28
|
if ( ! existsSync( filepath ) ) {
|
27
29
|
return;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@wordpress/e2e-tests",
|
3
|
-
"version": "7.
|
3
|
+
"version": "7.1.0",
|
4
4
|
"description": "End-To-End (E2E) tests for WordPress.",
|
5
5
|
"author": "The WordPress Contributors",
|
6
6
|
"license": "GPL-2.0-or-later",
|
@@ -23,11 +23,11 @@
|
|
23
23
|
"node": ">=14"
|
24
24
|
},
|
25
25
|
"dependencies": {
|
26
|
-
"@wordpress/e2e-test-utils": "^10.
|
27
|
-
"@wordpress/jest-console": "^7.
|
28
|
-
"@wordpress/jest-puppeteer-axe": "^6.
|
29
|
-
"@wordpress/scripts": "^26.
|
30
|
-
"@wordpress/url": "^3.
|
26
|
+
"@wordpress/e2e-test-utils": "^10.1.0",
|
27
|
+
"@wordpress/jest-console": "^7.1.0",
|
28
|
+
"@wordpress/jest-puppeteer-axe": "^6.1.0",
|
29
|
+
"@wordpress/scripts": "^26.1.0",
|
30
|
+
"@wordpress/url": "^3.31.0",
|
31
31
|
"chalk": "^4.0.0",
|
32
32
|
"expect-puppeteer": "^4.4.0",
|
33
33
|
"filenamify": "^4.2.0",
|
@@ -45,5 +45,5 @@
|
|
45
45
|
"publishConfig": {
|
46
46
|
"access": "public"
|
47
47
|
},
|
48
|
-
"gitHead": "
|
48
|
+
"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
|
49
49
|
}
|
@@ -42,30 +42,6 @@ describe( 'Cover', () => {
|
|
42
42
|
await createNewPost();
|
43
43
|
} );
|
44
44
|
|
45
|
-
it( 'can set overlay color using color picker on block placeholder', async () => {
|
46
|
-
await insertBlock( 'Cover' );
|
47
|
-
// Get the first color option from the block placeholder's color picker.
|
48
|
-
const colorPickerButton = await page.waitForSelector(
|
49
|
-
'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
|
50
|
-
);
|
51
|
-
// Get the RGB value of the picked color.
|
52
|
-
const pickedColor = await colorPickerButton.evaluate(
|
53
|
-
( node ) => node.style.backgroundColor
|
54
|
-
);
|
55
|
-
// Create the block by clicking selected color button.
|
56
|
-
await colorPickerButton.click();
|
57
|
-
// Get the block's background dim element.
|
58
|
-
const backgroundDim = await page.waitForSelector(
|
59
|
-
'.wp-block-cover .has-background-dim'
|
60
|
-
);
|
61
|
-
// Get the RGB value of the background dim.
|
62
|
-
const dimColor = await backgroundDim.evaluate(
|
63
|
-
( node ) => node.style.backgroundColor
|
64
|
-
);
|
65
|
-
|
66
|
-
expect( pickedColor ).toEqual( dimColor );
|
67
|
-
} );
|
68
|
-
|
69
45
|
it( 'can set background image using image upload on block placeholder', async () => {
|
70
46
|
await insertBlock( 'Cover' );
|
71
47
|
// Create the block using uploaded image.
|
@@ -95,27 +71,6 @@ describe( 'Cover', () => {
|
|
95
71
|
expect( backgroundDimOpacity ).toBe( '0.5' );
|
96
72
|
} );
|
97
73
|
|
98
|
-
it( 'can have the title edited', async () => {
|
99
|
-
await insertBlock( 'Cover' );
|
100
|
-
// Click first color option from the block placeholder's color picker.
|
101
|
-
const colorPickerButton = await page.waitForSelector(
|
102
|
-
'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
|
103
|
-
);
|
104
|
-
await colorPickerButton.click();
|
105
|
-
// Click the title placeholder to put the cursor inside.
|
106
|
-
const coverTitle = await page.waitForSelector(
|
107
|
-
'.wp-block-cover .wp-block-paragraph'
|
108
|
-
);
|
109
|
-
await coverTitle.click();
|
110
|
-
// Type the title.
|
111
|
-
await page.keyboard.type( 'foo' );
|
112
|
-
const coverTitleText = await coverTitle.evaluate(
|
113
|
-
( el ) => el.innerText
|
114
|
-
);
|
115
|
-
|
116
|
-
expect( coverTitleText ).toEqual( 'foo' );
|
117
|
-
} );
|
118
|
-
|
119
74
|
it( 'can be resized using drag & drop', async () => {
|
120
75
|
await insertBlock( 'Cover' );
|
121
76
|
// Close the inserter.
|
@@ -1,13 +1,12 @@
|
|
1
1
|
/**
|
2
|
-
*
|
2
|
+
* WordPress dependencies
|
3
3
|
*/
|
4
|
-
import {
|
5
|
-
import { writeFileSync } from 'fs';
|
4
|
+
import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
|
6
5
|
|
7
6
|
/**
|
8
|
-
*
|
7
|
+
* Internal dependencies
|
9
8
|
*/
|
10
|
-
import {
|
9
|
+
import { saveResultsFile } from './utils';
|
11
10
|
|
12
11
|
describe( 'Front End Performance', () => {
|
13
12
|
const results = {
|
@@ -22,12 +21,8 @@ describe( 'Front End Performance', () => {
|
|
22
21
|
} );
|
23
22
|
|
24
23
|
afterAll( async () => {
|
24
|
+
saveResultsFile( __filename, results );
|
25
25
|
await activateTheme( 'twentytwentyone' );
|
26
|
-
const resultsFilename = basename( __filename, '.js' ) + '.results.json';
|
27
|
-
writeFileSync(
|
28
|
-
join( __dirname, resultsFilename ),
|
29
|
-
JSON.stringify( results, null, 2 )
|
30
|
-
);
|
31
26
|
} );
|
32
27
|
|
33
28
|
it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
|
@@ -1,13 +1,12 @@
|
|
1
1
|
/**
|
2
|
-
*
|
2
|
+
* WordPress dependencies
|
3
3
|
*/
|
4
|
-
import {
|
5
|
-
import { writeFileSync } from 'fs';
|
4
|
+
import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
|
6
5
|
|
7
6
|
/**
|
8
|
-
*
|
7
|
+
* Internal dependencies
|
9
8
|
*/
|
10
|
-
import {
|
9
|
+
import { saveResultsFile } from './utils';
|
11
10
|
|
12
11
|
describe( 'Front End Performance', () => {
|
13
12
|
const results = {
|
@@ -22,11 +21,7 @@ describe( 'Front End Performance', () => {
|
|
22
21
|
} );
|
23
22
|
|
24
23
|
afterAll( async () => {
|
25
|
-
|
26
|
-
writeFileSync(
|
27
|
-
join( __dirname, resultsFilename ),
|
28
|
-
JSON.stringify( results, null, 2 )
|
29
|
-
);
|
24
|
+
saveResultsFile( __filename, results );
|
30
25
|
} );
|
31
26
|
|
32
27
|
it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
|
@@ -1,8 +1,7 @@
|
|
1
1
|
/**
|
2
2
|
* External dependencies
|
3
3
|
*/
|
4
|
-
import
|
5
|
-
import { writeFileSync } from 'fs';
|
4
|
+
import path from 'path';
|
6
5
|
|
7
6
|
/**
|
8
7
|
* WordPress dependencies
|
@@ -24,6 +23,8 @@ import {
|
|
24
23
|
import {
|
25
24
|
readFile,
|
26
25
|
deleteFile,
|
26
|
+
saveResultsFile,
|
27
|
+
getTraceFilePath,
|
27
28
|
getTypingEventDurations,
|
28
29
|
getClickEventDurations,
|
29
30
|
getHoverEventDurations,
|
@@ -78,16 +79,13 @@ describe( 'Post Editor Performance', () => {
|
|
78
79
|
inserterHover: [],
|
79
80
|
inserterSearch: [],
|
80
81
|
};
|
81
|
-
const
|
82
|
+
const traceFilePath = getTraceFilePath();
|
83
|
+
|
82
84
|
let traceResults;
|
83
85
|
|
84
86
|
afterAll( async () => {
|
85
|
-
|
86
|
-
|
87
|
-
join( __dirname, resultsFilename ),
|
88
|
-
JSON.stringify( results, null, 2 )
|
89
|
-
);
|
90
|
-
deleteFile( traceFile );
|
87
|
+
saveResultsFile( __filename, results );
|
88
|
+
deleteFile( traceFilePath );
|
91
89
|
} );
|
92
90
|
|
93
91
|
beforeEach( async () => {
|
@@ -103,7 +101,7 @@ describe( 'Post Editor Performance', () => {
|
|
103
101
|
|
104
102
|
it( 'Loading', async () => {
|
105
103
|
await loadHtmlIntoTheBlockEditor(
|
106
|
-
readFile( join( __dirname, '../../assets/large-post.html' ) )
|
104
|
+
readFile( path.join( __dirname, '../../assets/large-post.html' ) )
|
107
105
|
);
|
108
106
|
await saveDraft();
|
109
107
|
const draftURL = await page.url();
|
@@ -148,12 +146,12 @@ describe( 'Post Editor Performance', () => {
|
|
148
146
|
|
149
147
|
it( 'Typing', async () => {
|
150
148
|
await loadHtmlIntoTheBlockEditor(
|
151
|
-
readFile( join( __dirname, '../../assets/large-post.html' ) )
|
149
|
+
readFile( path.join( __dirname, '../../assets/large-post.html' ) )
|
152
150
|
);
|
153
151
|
await insertBlock( 'Paragraph' );
|
154
152
|
let i = 20;
|
155
153
|
await page.tracing.start( {
|
156
|
-
path:
|
154
|
+
path: traceFilePath,
|
157
155
|
screenshots: false,
|
158
156
|
categories: [ 'devtools.timeline' ],
|
159
157
|
} );
|
@@ -166,7 +164,7 @@ describe( 'Post Editor Performance', () => {
|
|
166
164
|
await page.keyboard.type( 'x' );
|
167
165
|
}
|
168
166
|
await page.tracing.stop();
|
169
|
-
traceResults = JSON.parse( readFile(
|
167
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
170
168
|
const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
|
171
169
|
getTypingEventDurations( traceResults );
|
172
170
|
if (
|
@@ -186,7 +184,7 @@ describe( 'Post Editor Performance', () => {
|
|
186
184
|
it( 'Typing within containers', async () => {
|
187
185
|
await loadHtmlIntoTheBlockEditor(
|
188
186
|
readFile(
|
189
|
-
join(
|
187
|
+
path.join(
|
190
188
|
__dirname,
|
191
189
|
'../../assets/small-post-with-containers.html'
|
192
190
|
)
|
@@ -202,7 +200,7 @@ describe( 'Post Editor Performance', () => {
|
|
202
200
|
|
203
201
|
let i = 10;
|
204
202
|
await page.tracing.start( {
|
205
|
-
path:
|
203
|
+
path: traceFilePath,
|
206
204
|
screenshots: false,
|
207
205
|
categories: [ 'devtools.timeline' ],
|
208
206
|
} );
|
@@ -216,7 +214,7 @@ describe( 'Post Editor Performance', () => {
|
|
216
214
|
// eslint-disable-next-line no-restricted-syntax
|
217
215
|
await page.waitForTimeout( 500 );
|
218
216
|
await page.tracing.stop();
|
219
|
-
traceResults = JSON.parse( readFile(
|
217
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
220
218
|
const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
|
221
219
|
getTypingEventDurations( traceResults );
|
222
220
|
if (
|
@@ -242,13 +240,13 @@ describe( 'Post Editor Performance', () => {
|
|
242
240
|
// eslint-disable-next-line no-restricted-syntax
|
243
241
|
await page.waitForTimeout( 1000 );
|
244
242
|
await page.tracing.start( {
|
245
|
-
path:
|
243
|
+
path: traceFilePath,
|
246
244
|
screenshots: false,
|
247
245
|
categories: [ 'devtools.timeline' ],
|
248
246
|
} );
|
249
247
|
await paragraphs[ j ].click();
|
250
248
|
await page.tracing.stop();
|
251
|
-
traceResults = JSON.parse( readFile(
|
249
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
252
250
|
const allDurations = getSelectionEventDurations( traceResults );
|
253
251
|
results.focus.push(
|
254
252
|
allDurations.reduce( ( acc, eventDurations ) => {
|
@@ -262,13 +260,13 @@ describe( 'Post Editor Performance', () => {
|
|
262
260
|
await load1000Paragraphs();
|
263
261
|
for ( let j = 0; j < 10; j++ ) {
|
264
262
|
await page.tracing.start( {
|
265
|
-
path:
|
263
|
+
path: traceFilePath,
|
266
264
|
screenshots: false,
|
267
265
|
categories: [ 'devtools.timeline' ],
|
268
266
|
} );
|
269
267
|
await openListView();
|
270
268
|
await page.tracing.stop();
|
271
|
-
traceResults = JSON.parse( readFile(
|
269
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
272
270
|
const [ mouseClickEvents ] = getClickEventDurations( traceResults );
|
273
271
|
for ( let k = 0; k < mouseClickEvents.length; k++ ) {
|
274
272
|
results.listViewOpen.push( mouseClickEvents[ k ] );
|
@@ -281,13 +279,13 @@ describe( 'Post Editor Performance', () => {
|
|
281
279
|
await load1000Paragraphs();
|
282
280
|
for ( let j = 0; j < 10; j++ ) {
|
283
281
|
await page.tracing.start( {
|
284
|
-
path:
|
282
|
+
path: traceFilePath,
|
285
283
|
screenshots: false,
|
286
284
|
categories: [ 'devtools.timeline' ],
|
287
285
|
} );
|
288
286
|
await openGlobalBlockInserter();
|
289
287
|
await page.tracing.stop();
|
290
|
-
traceResults = JSON.parse( readFile(
|
288
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
291
289
|
const [ mouseClickEvents ] = getClickEventDurations( traceResults );
|
292
290
|
for ( let k = 0; k < mouseClickEvents.length; k++ ) {
|
293
291
|
results.inserterOpen.push( mouseClickEvents[ k ] );
|
@@ -304,13 +302,13 @@ describe( 'Post Editor Performance', () => {
|
|
304
302
|
// eslint-disable-next-line no-restricted-syntax
|
305
303
|
await page.waitForTimeout( 500 );
|
306
304
|
await page.tracing.start( {
|
307
|
-
path:
|
305
|
+
path: traceFilePath,
|
308
306
|
screenshots: false,
|
309
307
|
categories: [ 'devtools.timeline' ],
|
310
308
|
} );
|
311
309
|
await page.keyboard.type( 'p' );
|
312
310
|
await page.tracing.stop();
|
313
|
-
traceResults = JSON.parse( readFile(
|
311
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
314
312
|
const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
|
315
313
|
getTypingEventDurations( traceResults );
|
316
314
|
if (
|
@@ -343,7 +341,7 @@ describe( 'Post Editor Performance', () => {
|
|
343
341
|
// eslint-disable-next-line no-restricted-syntax
|
344
342
|
await page.waitForTimeout( 200 );
|
345
343
|
await page.tracing.start( {
|
346
|
-
path:
|
344
|
+
path: traceFilePath,
|
347
345
|
screenshots: false,
|
348
346
|
categories: [ 'devtools.timeline' ],
|
349
347
|
} );
|
@@ -351,7 +349,7 @@ describe( 'Post Editor Performance', () => {
|
|
351
349
|
await page.hover( headingBlockItem );
|
352
350
|
await page.tracing.stop();
|
353
351
|
|
354
|
-
traceResults = JSON.parse( readFile(
|
352
|
+
traceResults = JSON.parse( readFile( traceFilePath ) );
|
355
353
|
const [ mouseOverEvents, mouseOutEvents ] =
|
356
354
|
getHoverEventDurations( traceResults );
|
357
355
|
for ( let k = 0; k < mouseOverEvents.length; k++ ) {
|
@@ -1,8 +1,7 @@
|
|
1
1
|
/**
|
2
2
|
* External dependencies
|
3
3
|
*/
|
4
|
-
import
|
5
|
-
import { writeFileSync } from 'fs';
|
4
|
+
import path from 'path';
|
6
5
|
|
7
6
|
/**
|
8
7
|
* WordPress dependencies
|
@@ -24,6 +23,8 @@ import {
|
|
24
23
|
import {
|
25
24
|
readFile,
|
26
25
|
deleteFile,
|
26
|
+
saveResultsFile,
|
27
|
+
getTraceFilePath,
|
27
28
|
getTypingEventDurations,
|
28
29
|
getLoadingDurations,
|
29
30
|
sequence,
|
@@ -56,7 +57,7 @@ describe( 'Site Editor Performance', () => {
|
|
56
57
|
await deleteAllTemplates( 'wp_template_part' );
|
57
58
|
|
58
59
|
const html = readFile(
|
59
|
-
join( __dirname, '../../assets/large-post.html' )
|
60
|
+
path.join( __dirname, '../../assets/large-post.html' )
|
60
61
|
);
|
61
62
|
|
62
63
|
await createNewPost( { postType: 'page' } );
|
@@ -83,12 +84,7 @@ describe( 'Site Editor Performance', () => {
|
|
83
84
|
} );
|
84
85
|
|
85
86
|
afterAll( async () => {
|
86
|
-
|
87
|
-
writeFileSync(
|
88
|
-
join( __dirname, resultsFilename ),
|
89
|
-
JSON.stringify( results, null, 2 )
|
90
|
-
);
|
91
|
-
|
87
|
+
saveResultsFile( __filename, results );
|
92
88
|
await deleteAllTemplates( 'wp_template' );
|
93
89
|
await deleteAllTemplates( 'wp_template_part' );
|
94
90
|
await activateTheme( 'twentytwentyone' );
|
@@ -159,9 +155,9 @@ describe( 'Site Editor Performance', () => {
|
|
159
155
|
await insertBlock( 'Paragraph' );
|
160
156
|
|
161
157
|
// Start tracing.
|
162
|
-
const
|
158
|
+
const traceFilePath = getTraceFilePath();
|
163
159
|
await page.tracing.start( {
|
164
|
-
path:
|
160
|
+
path: traceFilePath,
|
165
161
|
screenshots: false,
|
166
162
|
categories: [ 'devtools.timeline' ],
|
167
163
|
} );
|
@@ -171,7 +167,7 @@ describe( 'Site Editor Performance', () => {
|
|
171
167
|
|
172
168
|
// Stop tracing and save results.
|
173
169
|
await page.tracing.stop();
|
174
|
-
const traceResults = JSON.parse( readFile(
|
170
|
+
const traceResults = JSON.parse( readFile( traceFilePath ) );
|
175
171
|
const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
|
176
172
|
getTypingEventDurations( traceResults );
|
177
173
|
for ( let i = 0; i < keyDownEvents.length; i++ ) {
|
@@ -181,7 +177,7 @@ describe( 'Site Editor Performance', () => {
|
|
181
177
|
}
|
182
178
|
|
183
179
|
// Delete the original trace file.
|
184
|
-
deleteFile(
|
180
|
+
deleteFile( traceFilePath );
|
185
181
|
|
186
182
|
expect( true ).toBe( true );
|
187
183
|
} );
|
@@ -1,7 +1,8 @@
|
|
1
1
|
/**
|
2
2
|
* External dependencies
|
3
3
|
*/
|
4
|
-
import
|
4
|
+
import path from 'path';
|
5
|
+
import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
|
5
6
|
|
6
7
|
export function readFile( filePath ) {
|
7
8
|
return existsSync( filePath )
|
@@ -15,6 +16,21 @@ export function deleteFile( filePath ) {
|
|
15
16
|
}
|
16
17
|
}
|
17
18
|
|
19
|
+
export function getTraceFilePath() {
|
20
|
+
return path.join( process.env.WP_ARTIFACTS_PATH, '/trace.json' );
|
21
|
+
}
|
22
|
+
|
23
|
+
export function saveResultsFile( testFilename, results ) {
|
24
|
+
const resultsFilename =
|
25
|
+
process.env.RESULTS_FILENAME ||
|
26
|
+
path.basename( testFilename, '.js' ) + '.performance-results.json';
|
27
|
+
|
28
|
+
return writeFileSync(
|
29
|
+
path.join( process.env.WP_ARTIFACTS_PATH, resultsFilename ),
|
30
|
+
JSON.stringify( results, null, 2 )
|
31
|
+
);
|
32
|
+
}
|
33
|
+
|
18
34
|
function isEvent( item ) {
|
19
35
|
return (
|
20
36
|
item.cat === 'devtools.timeline' &&
|