{"id":2188,"date":"2024-12-10T15:19:06","date_gmt":"2024-12-10T13:19:06","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2188"},"modified":"2024-12-10T15:51:30","modified_gmt":"2024-12-10T13:51:30","slug":"cypress-form-testing-a-step-by-step-guide-to-filling-and-submitting-forms","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/cypress-form-testing","title":{"rendered":"Cypress Form Testing: A Step-by-Step Guide to Filling and Submitting Forms"},"content":{"rendered":"\n
\"Cypress<\/figure>\n\n\n\n

Often, Magento stores use various forms on the website to collect customer information or data. This data may be used for marketing purposes, to get feedback from customers, and more. For instance, these are login pages, checkout forms, survey forms, etc., where users have to provide access details or enter some (sensitive) information to complete their purchases. That\u2019s why securing seamless and proper application workflow is essential.<\/p>\n\n\n\n

Testing of forms is rather a necessity. To make it more effective and simplified, you can automate the process with Cypress. In this article, we\u2019ll provide a practical example of testing the Call for Price form in Magento 2 using Cypress, demonstrating key commands.<\/p>\n\n\n\n

Benefits of Using Cypress for Form Testing<\/h2>\n\n\n\n

The foremost aspects of Cypress form testing are the ease of filling in the fields and Cypress speed.<\/p>\n\n\n\n

Usually, forms have multiple fields with validation and checkboxes that need to be filled out during testing. Cypress provides intuitive commands that make filling fields straightforward. So, instead of manually checking, unchecking, and submitting the application, you just run a command.<\/p>\n\n\n\n

Another standout feature is automatic waiting<\/a>, which ensures that interactive elements are already visible or interactive before Cypress proceeds with the testing. Without this, you would need to set additional commands or wait manually until the elements are fully loaded and ready for input.<\/p>\n\n\n\n

Additionally, Cypress form testing allows you to test entire workflows, including input fields, checkboxes, radio buttons, and more, in a single run. No separate tests for each step!<\/p>\n\n\n\n

Having that in mind, let\u2019s proceed with the very commands to use during Cypress form testing.<\/p>\n\n\n\n

Key Cypress Commands for Form Testing<\/h2>\n\n\n\n

The tool provides a set of commands that streamline Cypress form testing. By considering them, you can automate form interactions and ensure a seamless user experience.<\/p>\n\n\n\n

  1. cy.get()<\/strong> – used to access form fields.<\/li><\/ol>\n\n\n\n

    The command helps to access or select specific elements (like forms) on the page. You just tell Cypress which element to find using something unique, such as an ID, class, or attribute.<\/p>\n\n\n\n

    1. cy.type()<\/strong> – used to fill in text fields.<\/li><\/ol>\n\n\n\n

      Some applications on the website require text keyboard input to be filled out \u2013 that is where cy.type() command comes into play. It imitates the user typing into a field and streamlines testing forms.<\/p>\n\n\n\n

      1. cy.clear()<\/strong> – used to clear the field before filling out (if necessary).<\/li><\/ol>\n\n\n\n

        This command is used when you already have text in the field, either typed by the user or as a default value. This is useful when you need to start with an empty field because the cy.clear() command removes any.<\/p>\n\n\n\n

        To get a clear understanding of command usage, let\u2019s get down to the practice.<\/p>\n\n\n\n

        Practical Example: Testing the Call for Price Form with Cypress<\/h2>\n\n\n\n

        In the following instance, we provide a step-by-step guide on how to implement commands, which we already discussed, to conduct effective form testing. Let’s consider Cypress filling and submitting the form of the Magento 2 Call for Price extension.<\/p>\n\n\n\n

        Step 1: Navigating to the Form<\/h3>\n\n\n\n

        Go to the category page where the call for price rule is applied. Check the display of the Call for Price button and click it:<\/p>\n\n\n\n

        \"Testing<\/figure>\n\n\n\n

        The commands to implement it:<\/p>\n\n\n\n

        <\/div>
        let buttonLabel = 'Call For Price'\nlet url = '' \/\/Your magento 2 domain\n\n\ncy.visit(url + '\/gear\/bags.html')\ncy.get('.products.list.items.product-items').should('be.visible')\ncy.get('.item.product.product-item').each(($el) => {\n   cy.wrap($el).get(`[title=\"${buttonLabel}\"]`).should('exist')\n   cy.get('.item.product.product-item').first().invoke('show')\n   .find(`[title=\"${buttonLabel}\"]`)\n   .click({force: true})\n})\n<\/code><\/pre><\/div>\n\n\n\n
        As a result, the Call for Price form will open:<\/p>\n\n\n\n
        \"Testing<\/figure>\n\n\n\n
        Step 2: Filling the Form<\/h3>\n\n\n\n
        After opening the form, fill in the text fields:<\/p>\n\n\n\n
        <\/div>
        cy.get('.callforprice-popup').contains('What is the best time to call you?').parent().parent().parent().as('callForPricePopup')\ncy.get('@callForPricePopup').within(() => {\n   cy.get('[name=\"name\"]').type('Test')\n   cy.get('[name=\"email\"]').type('example@plumrocket.com')\n   cy.get('[name=\"telephone\"]').type('+98887776655')\n   cy.get('[name=\"company\"]').type('Plumrocket')\n   cy.get('[name=\"address\"]').type('street')\n   cy.get('[name=\"state\"]').type('New York')\n   cy.get('[name=\"country\"]').select('United States')\n   cy.get('[name=\"recall\"]').select([10])\n   cy.get('[name=\"message\"]').type('test message')\n})\n<\/code><\/pre><\/div>\n\n\n\n
        As a result, we get the filled-in form:<\/p>\n\n\n\n
        \"Testing<\/figure>\n\n\n\n
        Step 3: Submitting the Form<\/h3>\n\n\n\n
        Send the filled-in form by pressing the \u201cSubmit Request\u201d button:<\/p>\n\n\n\n
        <\/div>
        cy.get('.action.primary').contains('Submit Request').click()<\/code><\/pre><\/div>\n\n\n\n
        Step 4: Verifying Success Message<\/h3>\n\n\n\n
        Check whether the success message appears after form submission and ensure that the popup automatically closes after a certain amount of time.<\/p>\n\n\n\n
        \"Testing<\/figure>\n\n\n\n
        Commands to perform:<\/p>\n\n\n\n
        <\/div>
        cy.get('#prcallforprice-succed-message').contains('Thank you! We received your request.')\ncy.wait(2000)\ncy.get('#prcallforprice-succed-message').should('not.be.visible')<\/code><\/pre><\/div>\n\n\n\n
        Conclusion<\/h2>\n\n\n\n
        Cypress proves to be a powerful and efficient tool for testing forms. It provides a range of benefits, such as automatic waiting or specific commands, which makes Cypress filling and testing forms much easier and faster. Additionally, due to Cypress’s nature, this tool is easier to learn than other tools for automatic testing.<\/p>\n\n\n\n
        Having issues with Magento 2 development & testing<\/a>? Contact us to streamline your development process and ensure optimal performance.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Often, Magento stores use various forms on the website to collect customer information or data. This data may be used for marketing purposes, to get feedback from customers, and more. For instance, these are login pages, checkout forms, survey forms, etc., where users have to provide access details or enter some (sensitive) information to complete their purchases. That\u2019s why securing seamless and proper application workflow is essential.<\/p>\n
        Testing of forms is rather a necessity. To make it more effective and simplified, you can automate the process with Cypress. In this article, we\u2019ll provide a practical example of testing the Call for Price form in Magento 2 using Cypress, demonstrating key commands.<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[144],"tags":[],"yoast_head":"\nCypress Form Testing: How to Fill and Submit Forms<\/title>\n<meta name=\"description\" content=\"Learn how to test forms with Cypress using a practical example. This guide walks you through filling out, submitting, and verifying forms step by step.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/cypress-form-testing\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cypress Form Testing: How to Fill and Submit Forms\" \/>\n<meta property=\"og:description\" content=\"Learn how to test forms with Cypress using a practical example. This guide walks you through filling out, submitting, and verifying forms step by step.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/cypress-form-testing\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners & Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-10T13:19:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T13:51:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/cypress-testing-forms.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2188"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=2188"}],"version-history":[{"count":10,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2188\/revisions"}],"predecessor-version":[{"id":2225,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2188\/revisions\/2225"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=2188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=2188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=2188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}