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’s why securing seamless and proper application workflow is essential.
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’ll provide a practical example of testing the Call for Price form in Magento 2 using Cypress, demonstrating key commands.
Benefits of Using Cypress for Form Testing
The foremost aspects of Cypress form testing are the ease of filling in the fields and Cypress speed.
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.
Another standout feature is automatic waiting, 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.
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!
Having that in mind, let’s proceed with the very commands to use during Cypress form testing.
Key Cypress Commands for Form Testing
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.
- cy.get() – used to access form fields.
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.
- cy.type() – used to fill in text fields.
Some applications on the website require text keyboard input to be filled out – that is where cy.type() command comes into play. It imitates the user typing into a field and streamlines testing forms.
- cy.clear() – used to clear the field before filling out (if necessary).
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.
To get a clear understanding of command usage, let’s get down to the practice.
Practical Example: Testing the Call for Price Form with Cypress
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.
Step 1: Navigating to the Form
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:
The commands to implement it:
let buttonLabel = 'Call For Price'
let url = '' //Your magento 2 domain
cy.visit(url + '/gear/bags.html')
cy.get('.products.list.items.product-items').should('be.visible')
cy.get('.item.product.product-item').each(($el) => {
cy.wrap($el).get(`[title="${buttonLabel}"]`).should('exist')
cy.get('.item.product.product-item').first().invoke('show')
.find(`[title="${buttonLabel}"]`)
.click({force: true})
})
As a result, the Call for Price form will open:
Step 2: Filling the Form
After opening the form, fill in the text fields:
cy.get('.callforprice-popup').contains('What is the best time to call you?').parent().parent().parent().as('callForPricePopup')
cy.get('@callForPricePopup').within(() => {
cy.get('[name="name"]').type('Test')
cy.get('[name="email"]').type('example@plumrocket.com')
cy.get('[name="telephone"]').type('+98887776655')
cy.get('[name="company"]').type('Plumrocket')
cy.get('[name="address"]').type('street')
cy.get('[name="state"]').type('New York')
cy.get('[name="country"]').select('United States')
cy.get('[name="recall"]').select([10])
cy.get('[name="message"]').type('test message')
})
As a result, we get the filled-in form:
Step 3: Submitting the Form
Send the filled-in form by pressing the “Submit Request” button:
cy.get('.action.primary').contains('Submit Request').click()Step 4: Verifying Success Message
Check whether the success message appears after form submission and ensure that the popup automatically closes after a certain amount of time.
Commands to perform:
cy.get('#prcallforprice-succed-message').contains('Thank you! We received your request.')
cy.wait(2000)
cy.get('#prcallforprice-succed-message').should('not.be.visible')Conclusion
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.
Having issues with Magento 2 development & testing? Contact us to streamline your development process and ensure optimal performance.