{"id":2299,"date":"2021-03-18T18:02:30","date_gmt":"2021-03-18T17:02:30","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=2299"},"modified":"2021-03-18T18:02:53","modified_gmt":"2021-03-18T17:02:53","slug":"automated-form-testing-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/automated-form-testing-in-wordpress\/","title":{"rendered":"Automated form testing in WordPress"},"content":{"rendered":"\n<p>I&#8217;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.<\/p>\n\n\n\n<p>Throughout the years, I&#8217;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&#8217;ve decided to automate it this time. <\/p>\n\n\n\n<p>My approach is using two major components:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.cypress.io\/\">Cypress<\/a> Javascript End to End Framework<\/li><li><a href=\"https:\/\/github.com\/KabaLabs\/Cypress-Recorder\">Cypress Recorder<\/a> Chrome Extension<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Record steps<\/h2>\n\n\n\n<p>I&#8217;ve used Cypress Recorder to fill the form and got a result that looked something like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndescribe('Event Form Submission', () =&gt; {\n  it('Fills in a form', () =&gt; {\n    cy.visit('http:\/\/example.test\/event-submit-test\/');\n    cy.get('#input_2_4').click();\n    cy.get('#input_2_4').type('Example Event Title');\n    cy.get('#input_2_5').click();\n    cy.get('#input_2_5').type('Example Event Description');\n    cy.get('#input_2_6').click({force: true});\n    cy.get('#input_2_6').type('June 20 - 25, 2022');\n    cy.get('#input_2_16').click({force: true});\n    cy.get('#input_2_16').type('https:\/\/www.example.com');\n    cy.get('#input_2_7').click({force: true});\n    cy.get('#input_2_7').type('Frankfurt, Germany');\n    cy.get('#input_2_8').click({force: true});\n    cy.get('#input_2_8').type('{backspace}');\n    cy.get('#input_2_8').type('Test Research Limited');\n\n    \/\/ .. more of similar to above ..\n\n    cy.get('#gform_submit_button_2').click({force: true});\n    cy.url().should('contains', 'http:\/\/example.test\/event-submit-test\/');\n  })\n})\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 2: Configure Cypress and install add-ons<\/h2>\n\n\n\n<p>By default Recorded doesn&#8217;t handle scrolling the window and that makes Cypress unhappy. So I had to add <code>{force: true}<\/code> to some <code>click()<\/code> calls to move the window down.<\/p>\n\n\n\n<p>My form is also working with file uploads and has a TinyMCE input textarea, so I had to uninstall two add-ons: <a href=\"https:\/\/github.com\/abramenal\/cypress-file-upload#readme\">cypress-file-upload<\/a> and <a href=\"https:\/\/github.com\/ForeachOS\/cypress-tinymce\">@foreachbe\/cypress-tinymce<\/a>. They&#8217;re both very simple to use:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ file upload\ncy.get('#input_2_17').attachFile('sample-picture.jpg');\n\n\/\/ tinyMCE modification\ncy.setTinyMceContent('input_2_11', 'This is the new content');\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 3: Enjoy automated form filling while developing backend code<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2021\/03\/wp-cypress-example2.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lessons learned<\/h2>\n\n\n\n<p>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&#8217;m happy to see that the whole experience was much better this time.<\/p>\n\n\n\n<p>Taking time to setup my dev workflow saved me many hours and I&#8217;m happy that I didn&#8217;t blindly start with development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;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&#8217;ve discovered that the most annoying and time consuming part of such development is filling form every time [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14,924],"tags":[],"class_list":["post-2299","post","type-post","status-publish","format-standard","hentry","category-tech","category-wordpress-tutorial"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=2299"}],"version-history":[{"count":3,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2299\/revisions"}],"predecessor-version":[{"id":2303,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/2299\/revisions\/2303"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=2299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=2299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=2299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}