Skip to content

Automated form testing in WordPress

I’m developing a Gravity Forms based workflow that is initially handled by a long form. Once the form gets submitted, it creates a custom post in backend so that editorial team can review it.

Throughout the years, I’ve discovered that the most annoying and time consuming part of such development is filling form every time you make a change. This is especially important as there is a number of behind the scenes actions that trigger only on form submit. I’ve decided to automate it this time.

My approach is using two major components:

Step 1: Record steps

I’ve used Cypress Recorder to fill the form and got a result that looked something like this:

describe('Event Form Submission', () => {
  it('Fills in a form', () => {
    cy.visit('http://example.test/event-submit-test/');
    cy.get('#input_2_4').click();
    cy.get('#input_2_4').type('Example Event Title');
    cy.get('#input_2_5').click();
    cy.get('#input_2_5').type('Example Event Description');
    cy.get('#input_2_6').click({force: true});
    cy.get('#input_2_6').type('June 20 - 25, 2022');
    cy.get('#input_2_16').click({force: true});
    cy.get('#input_2_16').type('https://www.example.com');
    cy.get('#input_2_7').click({force: true});
    cy.get('#input_2_7').type('Frankfurt, Germany');
    cy.get('#input_2_8').click({force: true});
    cy.get('#input_2_8').type('{backspace}');
    cy.get('#input_2_8').type('Test Research Limited');

    // .. more of similar to above ..

    cy.get('#gform_submit_button_2').click({force: true});
    cy.url().should('contains', 'http://example.test/event-submit-test/');
  })
})

Step 2: Configure Cypress and install add-ons

By default Recorded doesn’t handle scrolling the window and that makes Cypress unhappy. So I had to add {force: true} to some click() calls to move the window down.

My form is also working with file uploads and has a TinyMCE input textarea, so I had to uninstall two add-ons: cypress-file-upload and @foreachbe/cypress-tinymce. They’re both very simple to use:

// file upload
cy.get('#input_2_17').attachFile('sample-picture.jpg');

// tinyMCE modification
cy.setTinyMceContent('input_2_11', 'This is the new content');

Step 3: Enjoy automated form filling while developing backend code

Lessons learned

I originally asked my question on Facebook in a local developers group. I got some good tips that lead me down this path. Instead of trying to do something with Chrome extensions, I finally took the time to learn End to End testing framework in a non-React environment. My previous experience with such tools was Selenium and I’m happy to see that the whole experience was much better this time.

Taking time to setup my dev workflow saved me many hours and I’m happy that I didn’t blindly start with development.

— Tech, Wordpress