Buttons Block

End-to-end (E2E) testing is crucial in ensuring the stability and usability of WordPress features. Playwright, combined with WordPress’s @wordpress/e2e-test-utils-playwright, provides a robust framework for testing WordPress blocks in Gutenberg. This article explores a Playwright test suite designed to validate the behavior of the Buttons block in WordPress.

#Test Suite Overview Test Suite Overview

The test suite includes multiple test cases covering various interactions with the Buttons block, such as insertion, focus behavior, link handling, and accessibility.

#Dependencies Dependencies

The test suite relies on the Playwright-based @wordpress/e2e-test-utils-playwright package, which simplifies WordPress-specific interactions:

const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

Top ↑

#Test Cases Test Cases

Top ↑

#1. Inserting a Buttons Block and Checking Focus 1. Inserting a Buttons Block and Checking Focus

The first test verifies that when a Buttons block is inserted, the button text field receives focus immediately.

test( 'has focus on button content', async ( { editor, page } ) => {
    await editor.insertBlock( { name: 'core/buttons' } );
    await expect(
        editor.canvas.locator( 'role=textbox[name="Button text"i]' )
    ).toBeFocused();
    await page.keyboard.type( 'Content' );

    // Validate content
    const content = await editor.getEditedPostContent();
    expect( content ).toBe(
        `<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
    );
});

Top ↑

#2. Using the Slash Inserter to Add a Buttons Block 2. Using the Slash Inserter to Add a Buttons Block

This test ensures that users can insert a Buttons block using the slash (/) inserter and still have focus on the button text input.

test( 'has focus on button content (slash inserter)', async ( { editor, page } ) => {
    await editor.canvas.locator( 'role=button[name="Add default block"i]' ).click();
    await page.keyboard.type( '/buttons' );
    await page.keyboard.press( 'Enter' );
    await page.keyboard.type( 'Content' );

    // Validate content
    const content = await editor.getEditedPostContent();
    expect( content ).toBe(
        `<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
    );
});

Top ↑

#3. Dismissing the Link Editor with Escape Key 3. Dismissing the Link Editor with Escape Key

This test checks whether pressing the Escape key while editing a button link correctly dismisses the link editor and restores focus to the button text input.

test( 'dismisses link editor when escape is pressed', async ( { editor, page, pageUtils } ) => {
    await editor.insertBlock( { name: 'core/buttons' } );
    await expect(
        editor.canvas.locator( 'role=textbox[name="Button text"i]' )
    ).toBeFocused();
    await pageUtils.pressKeys( 'primary+k' );
    await expect(
        page.locator( 'role=combobox[name="Search or type URL"i]' )
    ).toBeFocused();
    await page.keyboard.press( 'Escape' );
    await expect(
        editor.canvas.locator( 'role=textbox[name="Button text"i]' )
    ).toBeFocused();
});

Top ↑

#4. Ensuring Proper URL Handling 4. Ensuring Proper URL Handling

Another critical test ensures that Playwright correctly appends the http:// protocol to links added without one.

test( 'appends http protocol to links added which are missing a protocol', async ( { editor, page, pageUtils } ) => {
    await editor.insertBlock( { name: 'core/buttons' } );
    await pageUtils.pressKeys( 'primary+k' );
    
    const urlInput = page.locator(
        'role=combobox[name="Search or type URL"i]'
    );
    
    await expect( urlInput ).toBeFocused();
    await page.keyboard.type( 'example.com' );
    await page.keyboard.press( 'Enter' );
    
    await pageUtils.pressKeys( 'Tab' );
    await page.keyboard.press( 'Enter' );
    
    await expect( urlInput ).toHaveValue( 'http://example.com' );
});

Top ↑

#Conclusion Conclusion

This test suite demonstrates the importance of automated testing in ensuring a smooth editing experience in the WordPress block editor. Using Playwright and @wordpress/e2e-test-utils-playwright, developers can efficiently validate the behavior of core blocks like Buttons, ensuring seamless functionality across different workflows.

Top ↑

#Key Takeaways: Key Takeaways:

• The Buttons block should focus on the text input when inserted.
• The Escape key should properly dismiss the link editor and restore focus.
• URLs missing a protocol should be corrected automatically.
• The slash inserter should work correctly for adding new blocks.

By incorporating Playwright tests like these into your WordPress development workflow, you can enhance editor usability and prevent regressions in future updates.