Link control: migrate tests to Playwright. Can be created by selectin…

…g text and using keyboard shortcuts (#50996)

* initial setup

* fixed utils

* update snapshots, commented waitForURLFieldAutoFocus

* removed old test

* removed unneeded code

* removed old snapshots

* use locator instead of component class

* remove appender function

* use locators instead of tabbing around

* rename button

* avoid snapshots and fix locator for Save button

* removed snapshots

* added comment

packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap

@@ -12,18 +12,6 @@ exports[`Links can be created by selecting text and clicking Link 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Links can be created by selecting text and using keyboard shortcuts 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Links can be created instantly when a URL is selected 1`] = `
 "<!-- wp:paragraph -->
 <p>This is Gutenberg: <a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a></p>

packages/e2e-tests/specs/editor/various/links.test.js

@@ -103,48 +103,6 @@ describe( 'Links', () => {
 		expect( urlInputValue ).toBe( '' );
 	} );
 
-	it( 'can be created by selecting text and using keyboard shortcuts', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Open settings.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Toggle should still have focus and be checked.
-		await page.waitForSelector(
-			':focus:checked.components-checkbox-control__input'
-		);
-
-		// Ensure that the contents of the post have not been changed, since at
-		// this point the link is still not inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Tab back to the Submit and apply the link.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// The link should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	it( 'can be created without any text selected', async () => {
 		// Create a block with some text.
 		await clickBlockAppender();

test/e2e/specs/editor/blocks/links.spec.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Links', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( `can be created by selecting text and using keyboard shortcuts`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Press Cmd+K to insert a link.
+		await pageUtils.pressKeys( 'primary+K' );
+
+		// Type a URL.
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Open settings.
+		await page.getByRole( 'button', { name: 'Link Settings' } ).click();
+
+		// Navigate to and toggle the "Open in new tab" checkbox.
+		const checkbox = page.getByLabel( 'Open in new tab' );
+		await checkbox.click();
+
+		// Toggle should still have focus and be checked.
+		await expect( checkbox ).toBeChecked();
+		await expect( checkbox ).toBeFocused();
+
+		// Ensure that the contents of the post have not been changed, since at
+		// this point the link is still not inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'This is Gutenberg' },
+			},
+		] );
+
+		// Tab back to the Submit and apply the link.
+		await page
+			//TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+			.locator( '.block-editor-link-control' )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+
+		// The link should have been inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+} );