{"id":1319,"date":"2024-11-08T04:03:13","date_gmt":"2024-11-08T04:03:13","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=1319"},"modified":"2025-12-04T07:44:07","modified_gmt":"2025-12-04T07:44:07","slug":"how-to-create-e2e-test-using-cypress-react","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/","title":{"rendered":"How to Create E2E Tests with Cypress and React"},"content":{"rendered":"\n

Overview<\/strong><\/h2>\n\n\n\n

Cypress is a modern testing tool built for web applications. It\u2019s designed to make it easier to write end-to-end (E2E) tests by allowing you to interact with and verify functionality directly in a browser. In this blog, we\u2019ll cover how to set up Cypress with React using Vite, create end-to-end test flows, and explore how Cypress can streamline testing, saving valuable development time.<\/p>\n\n\n\n

Prerequisites<\/strong><\/h2>\n\n\n\n

Before we begin, you should be familiar with React.js and know how to set up a React project with Vite. We\u2019ll be using a prebuilt signup form to demonstrate Cypress testing. Additionally, installing the Testing Playground Chrome extension will enhance the experience by helping you select and inspect elements.<\/p>\n\n\n\n

Why Choose Cypress?<\/strong><\/h2>\n\n\n\n

Cypress offers several powerful, out-of-the-box features that make it ideal for E2E testing, including:<\/p>\n\n\n\n

    \n
  • Snapshot Testing<\/strong>: Cypress takes snapshots as your tests run, helping you see exactly what happened at each step.<\/li>\n\n\n\n
  • Automatic Waiting<\/strong>: Cypress automatically waits for elements to appear and for network requests to complete, eliminating the need to add waits or delays in tests.<\/li>\n\n\n\n
  • Cross-Browser Support<\/strong>: Run tests in multiple browsers, including Firefox and Chrome.<\/li>\n\n\n\n
  • Network Traffic Control<\/strong>: Control and inspect network requests directly within tests.<\/li>\n\n\n\n
  • Visual Coverage<\/strong>: Visualize code coverage to ensure tests are comprehensive.<\/li>\n<\/ul>\n\n\n\n

    Creating Your First E2E Test with Cypress<\/strong><\/h2>\n\n\n\n

    Let\u2019s walk through the steps to set up and create your first end-to-end test.<\/p>\n\n\n\n

    Step 1: Install the Testing Playground Extension (Optional)<\/strong><\/p>\n\n\n\n

    \"Illustration<\/figure>\n\n\n\n

    Testing Playground is a Chrome extension that makes it easier to inspect and select UI elements like buttons and input fields. This can be helpful for accurate element selection when writing test cases.<\/p>\n\n\n\n

    Step 2: Install Cypress in Your Project<\/strong><\/h3>\n\n\n\n

    To install Cypress, run the following command:<\/p>\n\n\n\n

    npm install cypress --save-dev<\/code><\/pre>\n\n\n\n
    Next, install the Cypress Testing Library, which allows you to use powerful selector functions:<\/p>\n\n\n\n
    npm install --save-dev @testing-library\/cypress<\/code><\/pre>\n\n\n\n
    Step 3: Add the Testing Library to Cypress<\/strong><\/p>\n\n\n\n
    In cypress\/support\/commands.js, add the following line to enable Testing Library methods:<\/p>\n\n\n\n
    import '@testing-library\/cypress\/add-commands';<\/code><\/pre>\n\n\n\n
    This addition allows you to use methods like findByRole and findByText, making it easier to select and interact with elements<\/p>\n\n\n\n
    Step 4: Run the React Project and Cypress<\/strong><\/h3>\n\n\n\n
    First, start your React project using Vite:<\/p>\n\n\n\n
    npm run dev<\/code><\/pre>\n\n\n\n
    In a new terminal, open Cypress with the following command:<\/p>\n\n\n\n
    npx cypress open<\/code><\/pre>\n\n\n\n
    Cypress will open in a new window where you can configure E2E testing and select a browser to run the tests.<\/p>\n\n\n\n
    \"Illustration<\/figure>\n\n\n\n
    Step 5: Set Up the E2E Folder and Files in Cypress<\/strong><\/h3>\n\n\n\n
    Inside the Cypress e2e folder, create a new file for your test cases. For example:<\/p>\n\n\n\n
    cypress\/e2e\/registerButton.cy.js<\/p>\n\n\n\n
    Step 6: Write Your First Test Case<\/strong><\/h3>\n\n\n\n
    Now, let\u2019s write a test case that verifies the signup process using the following code:<\/p>\n\n\n\n
    \/\/ cypress\/e2e\/registerButton.cy.js\n\ndescribe(\"Register Button Test\", () => {\n  it(\"should find and click the register button\", () => {\n    \/\/ Set the viewport size for consistent testing\n    cy.viewport(1024, 768);\n    \/\/ Visit the application URL\n    cy.visit(\"http:\/\/localhost:5173\");\n\n    \/\/ Locate and click the \"Register\" link\n    cy.findByRole(\"link\", { name: \/no account\\? register here\/i }).click();\n    \/\/ Fill in the signup form fields\n    cy.get(\"#email\").type(\"user@example.com\");\n    cy.get(\"#bookingReference\").type(\"69415\");\n    cy.get(\"#password\").type(\"Admin@123\");\n    cy.get(\"#confirmPassword\").type(\"Admin@123\");\n    cy.get(\"#remember\").click();\n    \/\/ Submit the registration form\n    cy.findByRole(\"button\", { name: \/register\/i }).click();\n  });\n});\n<\/code><\/pre>\n\n\n\n
    Explanation of Key Commands:<\/strong><\/p>\n\n\n\n
      \n
    • cy.visit(): Opens the specified URL in the Cypress browser.<\/li>\n\n\n\n
    • cy.findByRole(): Finds an element by its role, such as a button or link, improving accessibility and accuracy.<\/li>\n\n\n\n
    • cy.get(): Finds an element by its selector, like an ID, for precise selection.<\/li>\n\n\n\n
    • cy.viewport(): Sets the browser\u2019s viewport dimensions, ensuring tests run consistently across different devices.<\/li>\n<\/ul>\n\n\n\n
      Step 7: Run the Cypress Test<\/strong><\/h3>\n\n\n\n
      In the Cypress window, select the E2E testing option and choose a browser. In this guide, we\u2019ll use Electron, but you can also test in Chrome, Firefox, or others.<\/p>\n\n\n\n
      Cypress will now run your test in the selected browser, showing step-by-step actions and any issues encountered along the way.<\/p>\n\n\n\n
      \"Illustration<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      Conclusion<\/strong><\/h2>\n\n\n\n
      By following these steps, you can set up Cypress for E2E testing in your React + Vite project. Cypress simplifies and speeds up testing by providing built-in tools like automatic waiting, cross-browser support, and visual snapshots. With Cypress, you can create robust and reliable E2E tests that save time and catch issues before they make it to production. Happy testing!<\/p>\n","protected":false},"excerpt":{"rendered":"
      Overview Cypress is a modern testing tool built for web applications. It\u2019s designed to make it easier…<\/p>\n","protected":false},"author":5,"featured_media":1324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[92,14],"class_list":["post-1319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-mobile-app-development","tag-react-native"],"yoast_head":"\nHow to Create E2E Tests with Cypress and React Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Learn how to create E2E tests using Cypress and React with a step-by-step guide that simplifies setup, testing flows, and best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create E2E Tests with Cypress and React Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Learn how to create E2E tests using Cypress and React with a step-by-step guide that simplifies setup, testing flows, and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-08T04:03:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"780\" \/>\n\t<meta property=\"og:image:height\" content=\"520\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create E2E Tests with Cypress and React Web Development, Software, and App Blog | 200OK Solutions","description":"Learn how to create E2E tests using Cypress and React with a step-by-step guide that simplifies setup, testing flows, and best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/","og_locale":"en_US","og_type":"article","og_title":"How to Create E2E Tests with Cypress and React Web Development, Software, and App Blog | 200OK Solutions","og_description":"Learn how to create E2E tests using Cypress and React with a step-by-step guide that simplifies setup, testing flows, and best practices.","og_url":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2024-11-08T04:03:13+00:00","article_modified_time":"2025-12-04T07:44:07+00:00","og_image":[{"width":780,"height":520,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp","type":"image\/webp"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"How to Create E2E Tests with Cypress and React","datePublished":"2024-11-08T04:03:13+00:00","dateModified":"2025-12-04T07:44:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/"},"wordCount":633,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp","keywords":["Mobile App Development","react native"],"articleSection":["FrontEnd"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/","url":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/","name":"How to Create E2E Tests with Cypress and React Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp","datePublished":"2024-11-08T04:03:13+00:00","dateModified":"2025-12-04T07:44:07+00:00","description":"Learn how to create E2E tests using Cypress and React with a step-by-step guide that simplifies setup, testing flows, and best practices.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp","contentUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/11\/Picture2-4-1.webp","width":780,"height":520,"caption":"Illustration of creating E2E tests with Cypress and React"},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/how-to-create-e2e-test-using-cypress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create E2E Tests with Cypress and React"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android & iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1319"}],"version-history":[{"count":3,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1331,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/1324"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}