{"id":1545,"date":"2024-09-13T15:16:27","date_gmt":"2024-09-13T12:16:27","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=1545"},"modified":"2024-10-10T11:02:57","modified_gmt":"2024-10-10T08:02:57","slug":"cypress-magento-2-testing-practical-examples","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-2-cypress-test-examples","title":{"rendered":"Cypress Magento 2 Testing: Practical Examples"},"content":{"rendered":"\n
\"Cypress<\/figure>\n\n\n\n

The testing process often takes some time and effort because of the increasing complexity of web applications. Fortunately, tools like Cypress can streamline this process by offering efficient E2E testing capabilities.<\/p>\n\n\n\n

The E2E methodology allows for testing the overall customer journey from product browsing to checkout. This is especially effective for Magento 2 modules because the testing framework involves setting backend module configurations and checking the result on the frontend.<\/p>\n\n\n\n

We prepared a hands-on example of creating and testing product labels in Magento 2. This provides you with an actionable example of using Cypress with Magento 2.<\/p>\n\n\n\n

What is Cypress?<\/h2>\n\n\n\n

Cypress is a Javascript-based E2E testing framework that offers a solution for efficiently writing, running, and debugging automated tests. This framework is built for modern web applications and runs in the same browser to work directly with elements. Cypress can efficiently work with different tools and frameworks like React, Angular, Vue, and more.<\/p>\n\n\n\n

Why Use Cypress for Magento 2 Testing?<\/h2>\n\n\n\n

Cypress is extremely helpful when working with Magento 2. Thanks to its features, you can conduct real-time testing to easily identify and debug issues. This process doesn\u2019t take much time because Cypress uses automatic waiting mechanisms, streamlining Magento 2 test execution.<\/p>\n\n\n\n

Moreover, Cypress uses E2E testing capabilities, which imitate user interaction with Magento 2 backend elements during their configuration. Specifically, they fill in the inputs, check the checkboxes, and click on the buttons when the elements are loaded and visible on the page for the user.<\/p>\n\n\n\n

The same goes for the frontend: Cypress imitates user actions on this part, which helps test the Magento 2 frontend.<\/p>\n\n\n\n

Features of Cypress<\/h2>\n\n\n\n

Cypress for Magento 2 has many benefits, such as easy setup, real-time reloads, and cross-browser testing, which can streamline the testing process and bring more results. In this tutorial, we prepared 3 core Cypress features that set this framework apart from others.<\/p>\n\n\n\n

Automatic waiting<\/strong>
This Cypress feature constantly monitors the webpage for changes and waits until the necessary button becomes available. For example, some buttons may appear only after some element becomes visible or interactive, so to activate them, the testing framework should wait. Cypress regularly monitors the DOM for changes to ensure elements are prepared before test interactions, preventing test failures.<\/p>\n\n\n\n

Interactive debugging<\/strong>
To inspect the test step-by-step, it is used interactive debugging. This functionality includes the ability to set breakpoints, examine variable values, and explore the application’s state at any given point. It helps effectively and quickly identify issues.<\/p>\n\n\n\n

Time travel<\/strong>
One of the remarkable Cypress features is time travel, which helps to understand the sequence of events leading to a test failure. It steps through the test, examines variables, network requests, and DOM elements. Developers can step through history and pinpoint the exact moment when things went wrong.<\/p>\n\n\n\n

Cypress Test Example: Creating and Verifying Product Labels in Magento 2<\/h2>\n\n\n\n

To test product labels on the frontend, you need to create a label with Cypress and verify its presence and content on the product grid.<\/p>\n\n\n\n

<\/div>
let titleImage = 'image label'\nlet url = '' \/\/You magento 2 domain\n\n\n\/\/Go to the Product Labels grid\ncy.get('#add').click()\ncy.get('.fieldset-wrapper-title').contains('General').should('be.visible')\ncy.get('.page-title').contains('New Label Rule')\ncy.get('#container', { timeout: 20000 }).should('be.visible')\ncy.get('.admin__actions-switch [type=\"checkbox\"]').check()\ncy.get('.admin__field-control [name=\"title\"]').type(titleImage)\ncy.get('[name=\"priority\"]').type('0')\ncy.get('[name=\"store\"]').select(\"All Store Views\")\ncy.get('[name=\"customer_group\"]').select(\"ALL GROUPS\")\n\n\ncy.get('.admin__page-nav-link').contains('Display Settings').click()\ncy.get('.fieldset-wrapper-title').contains('Display Settings').should('be.visible')\ncy.get('.fieldset-wrapper-title').contains('Display Settings For Product List').should('be.visible')\ncy.get('.admin__field .admin__field-control .admin__field.admin__field-option').contains('Image').click()\ncy.get('[name=\"product_list[position]\"]').select('Bottom Right')\ncy.get('.accordion-btn').contains('Show more images').click()\ncy.get('.gallery-wrapper .gallery-list').should('be.visible')\ncy.get('[alt=\"c_0_25.svg\"]').first().click()\ncy.wait(500)\ncy.get('.accordion-btn').contains('Show less images').click()\ncy.get('.fieldset-wrapper-title').contains('Display Settings For Product Page').should('be.visible')\n\n\ncy.get('.admin__page-nav-link').contains('Conditions').click()\ncy.get('.legend').contains('Specify conditions when the product label').should('be.visible')\ncy.get('.fieldset-wrapper-title').contains('Conditions').should('be.visible')\ncy.get('.rule-param-children [title=\"Add\"]').click()\ncy.wait(500)\ncy.get('[name=\"rule[conditions][1][new_child]\"]').select('Category', {force: true})\ncy.get('#conditions__1__children > li:nth-child(1) > span:nth-child(4) > a').click()\ncy.get('[name=\"rule[conditions][1--1][value]\"]').type('27, 4, 6')\ncy.get('[alt=\"Apply\"]').click()\ncy.get('#save').click()\ncy.get('.page-title').contains('Product Labels')\ncy.get('.messages', { timeout: 20000 }).should('be.visible')\ncy.get('.messages').contains('Label successfully saved!')\ncy.get('td:nth-child(10)', { timeout: 20000 }).should('be.visible')\n\n\n\/\/Verify the created label on the Product Labels grid\ncy.get('.admin__data-grid-wrap').contains(titleImage).parent().parent().as('manageLabels')\ncy.get('@manageLabels').within(() => {\n   cy.get('td:nth-child(1)')\n   .find('input[type=\"checkbox\"]')\n   .should('exist')\n   cy.get('td:nth-child(3)').contains(titleImage)\n   cy.get('td:nth-child(4) img[alt=\"' + titleImage + '\"]').should('exist')\n   cy.get('td:nth-child(5) img[alt=\"' + titleImage + '\"]').should('exist')\n   cy.get('td:nth-child(6)').contains('0')\n   cy.get('td:nth-child(7)').contains('Enabled')\n   cy.get('td:nth-child(10)').contains('Edit')\n})\ncy.get('.admin__data-grid-wrap').contains(titleImage).parent().parent().as('manageLabels')\ncy.get('@manageLabels').within(() => {\n   cy.get('td:nth-child(1)')\n   .find('input[type=\"checkbox\"]')\n   .should('exist')\n   cy.get('td:nth-child(3)').contains(titleImage)\n   cy.get('td:nth-child(4) img[alt=\"' + titleImage + '\"]').should('exist')\n   cy.get('td:nth-child(5) img[alt=\"' + titleImage + '\"]').should('exist')\n   cy.get('td:nth-child(6)').contains('0')\n   cy.get('td:nth-child(7)').contains('Enabled')\n   cy.get('td:nth-child(10)').contains('Edit')<\/code><\/pre><\/div>\n\n\n\n
This is a result of code. The label is created.<\/p>\n\n\n\n
\"Cypress<\/figure>\n\n\n\n
<\/div>
\/\/Navigate to the frontend category page and verify if the specified label has appeared on the page\ncy.visit(url + '\/gear\/watches.html')\ncy.get('.item.product.product-item img[alt=\"' + titleImage + '\"]').should('exist')\n\n\n\/\/From the category page, go to the product page and check whether the given label has appeared\ncy.get('.item.product.product-item').first().click()\ncy.get('.product.media img[alt=\"' + titleImage + '\"]').should('exist')\n\n\n\/\/Go to a frontend page of another category and check whether the label we set is there\ncy.visit(url + '\/women\/bottoms-women\/pants-women.html')\ncy.get('.item.product.product-item img[alt=\"' + titleImage + '\"]').should('exist')\n\n\n\/\/From the category page, go to the page of another product and check whether the given label has appeared\ncy.get('.item.product.product-item').first().click()\ncy.get('.product.media img[alt=\"' + titleImage + '\"]').should('exist')<\/code><\/pre><\/div>\n\n\n\n
Here is the result on the category page:<\/p>\n\n\n\n
\"Cypress<\/figure>\n\n\n\n
Here is the result on the product page:<\/p>\n\n\n\n
\"Cypress<\/figure>\n\n\n\n
Cypress VS Alternative Tools for Magento 2 Testing<\/h2>\n\n\n\n
Although Cypress is considered to be the best tool for Magento 2 testing, it isn\u2019t just one solution for enhancing the testing process. However, there are alternative tools, such as Playwright and Selenium WebDriver, which have their own benefits and advantages for QA engineers.<\/p>\n\n\n\n
Playwright<\/strong> is a relatively new framework for web automation developed by Microsoft. While it supports multiple languages, it’s primarily focused on JavaScript and TypeScript. It also excels in cross-browser and cross-platform testing, providing reliable automation for Chrome, Firefox, WebKit, and mobile browsers. Playwright provides features such as code generation and automatic waiting, which makes it a helpful solution for testing.<\/p>\n\n\n\n
Selenium WebDriver<\/strong> is an open-source tool for automating web application testing. This tool directly interacts with browsers like Firefox, Chrome, Safari, and Internet Explorer, so it is possible to execute cross-browser testing with Selenium. Also, WebDriver supports different languages such as Java, .Net, PHP, Python, Perl, and Ruby. However, compared to Playwright and Cypress, Selenium WebDriver is considered much slower.<\/p>\n\n\n\n
While many tools have their own advantages, Cypress stands out with a user-friendly interface, detailed documentation, and easy-to-write tests. The most advantageous aspect is that this framework uses the E2E testing approach. By replicating the customer journey, it empowers testers to work more efficiently and effectively, accelerating development cycles.<\/p>\n\n\n\n
\n
<\/div>\n\n\n\n
\n
Enhance your store’s performance with expert Magento development and high-quality QA<\/a> services today!<\/p>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The E2E methodology allows for testing the overall customer journey from product browsing to checkout. This is especially effective for Magento 2 modules because the testing framework involves setting backend module configurations and checking the result on the frontend.<\/p>\n
We prepared a hands-on example of creating and testing product labels in Magento 2. This provides you with an actionable example of using Cypress with Magento 2.<\/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":"\nMagento 2 Cypress Test Examples<\/title>\n<meta name=\"description\" content=\"Find practical Cypress test examples for Magento 2 extensions. Dive into Cypress functionality and features to ensure robust and reliable extensions.\" \/>\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\/magento-2-cypress-test-examples\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Cypress Test Examples\" \/>\n<meta property=\"og:description\" content=\"Find practical Cypress test examples for Magento 2 extensions. Dive into Cypress functionality and features to ensure robust and reliable extensions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/magento-2-cypress-test-examples\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners & Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-13T12:16:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-10T08:02:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/09\/cypress-magento-testing.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=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1545"}],"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=1545"}],"version-history":[{"count":13,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1545\/revisions"}],"predecessor-version":[{"id":1937,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1545\/revisions\/1937"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=1545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=1545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=1545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}