-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate 'invalid blocks' e2e tests to Playwright (#57508)
* Migrate 'invalid blocks' e2e tests to Playwright * Remove old test file
- Loading branch information
Showing
2 changed files
with
119 additions
and
100 deletions.
There are no files selected for viewing
100 changes: 0 additions & 100 deletions
100
packages/e2e-tests/specs/editor/various/invalid-block.test.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); | ||
|
||
test.describe( 'Invalid blocks', () => { | ||
test.beforeEach( async ( { admin } ) => { | ||
await admin.createNewPost(); | ||
} ); | ||
|
||
test( 'should show an invalid block message with clickable options', async ( { | ||
editor, | ||
page, | ||
} ) => { | ||
// Create an empty paragraph with the focus in the block. | ||
await editor.canvas | ||
.getByRole( 'button', { name: 'Add default block' } ) | ||
.click(); | ||
await page.keyboard.type( 'hello' ); | ||
|
||
// Change to HTML mode and close the options. | ||
await editor.clickBlockOptionsMenuItem( 'Edit as HTML' ); | ||
|
||
// Focus on the textarea and enter an invalid paragraph. | ||
await editor.canvas | ||
.getByRole( 'document', { name: 'Block: Paragraph' } ) | ||
.getByRole( 'textbox' ) | ||
.fill( '<p>invalid paragraph' ); | ||
|
||
// Takes the focus away from the block so the invalid warning is triggered. | ||
await editor.saveDraft(); | ||
|
||
// Click on the 'three-dots' menu toggle. | ||
await editor.canvas | ||
.getByRole( 'document', { name: 'Block: Paragraph' } ) | ||
.getByRole( 'button', { name: 'More options' } ) | ||
.click(); | ||
|
||
await page | ||
.getByRole( 'menu', { name: 'More options' } ) | ||
.getByRole( 'menuitem', { name: 'Resolve' } ) | ||
.click(); | ||
|
||
// Check we get the resolve modal with the appropriate contents. | ||
await expect( | ||
page | ||
.getByRole( 'dialog', { name: 'Resolve Block' } ) | ||
.locator( '.block-editor-block-compare__html' ) | ||
).toHaveText( [ '<p>invalid paragraph', '<p>invalid paragraph</p>' ] ); | ||
} ); | ||
|
||
test( 'should strip potentially malicious on* attributes', async ( { | ||
editor, | ||
page, | ||
} ) => { | ||
let hasAlert = false; | ||
let error = ''; | ||
let warning = ''; | ||
|
||
page.on( 'dialog', () => { | ||
hasAlert = true; | ||
} ); | ||
|
||
page.on( 'console', ( msg ) => { | ||
if ( msg.type() === 'error' ) { | ||
error = msg.text(); | ||
} | ||
|
||
if ( msg.type() === 'warning' ) { | ||
warning = msg.text(); | ||
} | ||
} ); | ||
|
||
await editor.setContent( ` | ||
<!-- wp:paragraph --> | ||
<p>aaaa <img src onerror=alert(1)></x dde></x>1 | ||
<!-- /wp:paragraph --> | ||
` ); | ||
|
||
// Give the browser time to show the alert. | ||
await expect( | ||
editor.canvas | ||
.getByRole( 'document', { name: 'Block: Paragraph' } ) | ||
.getByRole( 'button', { name: 'Attempt Block Recovery' } ) | ||
).toBeVisible(); | ||
|
||
expect( hasAlert ).toBe( false ); | ||
expect( error ).toContain( | ||
'Block validation: Block validation failed' | ||
); | ||
expect( warning ).toContain( | ||
'Block validation: Malformed HTML detected' | ||
); | ||
} ); | ||
|
||
test( 'should not trigger malicious script tags when using a shortcode block', async ( { | ||
editor, | ||
page, | ||
} ) => { | ||
let hasAlert = false; | ||
|
||
page.on( 'dialog', () => { | ||
hasAlert = true; | ||
} ); | ||
|
||
await editor.setContent( ` | ||
<!-- wp:shortcode --> | ||
<animate onbegin=alert(1) attributeName=x dur=1s><script>alert("EVIL");</script><style>@keyframes x{}</style><a style="animation-name:x" onanimationstart="alert(2)"></a> | ||
<!-- /wp:shortcode --> | ||
` ); | ||
|
||
// Give the browser time to show the alert. | ||
await expect( | ||
editor.canvas.getByRole( 'document', { name: 'Block: Shortcode' } ) | ||
).toBeVisible(); | ||
|
||
expect( hasAlert ).toBe( false ); | ||
} ); | ||
} ); |