{ "doc": { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test", "title": "End-to-End Testing: Your First Test with Cypress", "description": "Dive into Cypress end-to-end testing with a guide on writing your first test. Learn step-by-step, best practices, and tips for efficient test creation", "section": "app", "source_path": "/llm/markdown/app/end-to-end-testing/writing-your-first-end-to-end-test.md", "version": "ce02913654e2655ee63448bdc92bb92c7b46a619", "updated_at": "2026-04-22T19:37:51.587Z", "headings": [ { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#your-first-test", "text": "Your First Test", "level": 1 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#what-youll-learn", "text": " What you'll learn", "level": 5 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#add-a-test-file", "text": "Add a test file", "level": 2 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#write-your-first-test", "text": "Write your first test", "level": 2 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#write-a-real-test", "text": "Write a real test", "level": 2 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#step-1-visit-a-page", "text": " Step 1: Visit a page", "level": 3 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#step-2-query-for-an-element", "text": " Step 2: Query for an element", "level": 3 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#step-3-click-an-element", "text": " Step 3: Click an element", "level": 3 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#step-4-make-an-assertion", "text": " Step 4: Make an assertion", "level": 3 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#adding-more-commands-and-assertions", "text": "Adding more commands and assertions", "level": 4 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#record-tests-with-cypress-studio", "text": "Record Tests with Cypress Studio", "level": 2 }, { "id": "app/end-to-end-testing/writing-your-first-end-to-end-test#next-steps", "text": "Next steps", "level": 2 } ] }, "content": { "type": "root", "children": [ { "type": "heading", "depth": 1, "children": [ { "type": "text", "value": "Your First Test" } ] }, { "type": "heading", "depth": 5, "children": [ { "type": "text", "value": " What you'll learn" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to write your first end-to-end test in Cypress using an example app" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to use Cypress commands to interact with elements on a page" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to make assertions about the state of the application\n:::" } ] } ] } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Add a test file" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Assuming you've successfully\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/install-cypress.md", "children": [ { "type": "text", "value": "installed Cypress" } ] }, { "type": "text", "value": " and\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/open-the-app.md", "children": [ { "type": "text", "value": "opened Cypress" } ] }, { "type": "text", "value": ", now it's time to add\nyour first test. We're going to do this with the Create new empty\nspec button." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "On clicking it, you should see a dialog where you can enter the name of your new\nspec. Just accept the default name for now." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The newly-generated spec is displayed in a confirmation dialog. Just go ahead\nand close it with the ✕ button." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Once we've created that file, you should see it immediately displayed in the\nlist of end-to-end specs. Cypress monitors your spec files for any changes and\nautomatically displays any changes." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Even though we haven't written any code yet - that's okay - let's click on your\nnew spec and watch Cypress launch it. Cypress will visit `https://example.cypress.io` and the test passes." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Write your first test" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Now it's time to write your first test. We're going to:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Write your first passing test." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Update it so it fails." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Watch Cypress reload in real time." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Open up your favorite IDE and replace the contents of your spec with the code\nbelow." } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('Does not do much!', () => {\n expect(true).to.equal(true)\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Once you save this change you should see the browser reload." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Although it doesn't do anything useful, this is our first passing test! ✅" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Over in the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md#Command-Log", "children": [ { "type": "text", "value": "Command Log" } ] }, { "type": "text", "value": " you'll\nsee Cypress display the suite, the test and your first assertion (which should\nbe passing in green)." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Notice Cypress displays a message about this being the default page\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md#Application-Under-Test", "children": [ { "type": "text", "value": "on the righthand side" } ] }, { "type": "text", "value": ".\nCypress assumes you'll want to go out and " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/visit.md", "children": [ { "type": "text", "value": "visit" } ] }, { "type": "text", "value": " a URL on\nthe internet - but it can also work just fine without that." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Now let's write our first failing test." } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('Does not do much!', () => {\n expect(true).to.equal(false)\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Once you save again, you'll see Cypress display the failing test in red since\n`true` does not equal `false`." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress displays a detailed error view that includes the stack trace and the exact code frame where the assertion failed. This helps you quickly identify and fix the issue." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you don't see the code frame or stack trace, you may need to " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/debugging.md#Source-maps", "children": [ { "type": "text", "value": "enable sourcemaps" } ] }, { "type": "text", "value": " for better debugging information." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can click on the blue file link to open the file\nwhere the error occurred in\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/IDE-integration.md#File-Opener-Preference", "children": [ { "type": "text", "value": "your preferred file opener" } ] }, { "type": "text", "value": ".\nTo read more about the error's display, read about\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/debugging.md#Errors", "children": [ { "type": "text", "value": "Debugging Errors" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md", "children": [ { "type": "text", "value": "Cypress" } ] }, { "type": "text", "value": " gives you a visual structure of\nsuites, tests, and assertions. Soon you'll also see commands, page events,\nnetwork requests, and more." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "What are describe, it, and expect ?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "All of these functions come from\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/bundled-libraries.md", "children": [ { "type": "text", "value": "Bundled Libraries" } ] }, { "type": "text", "value": " that Cypress bakes in." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "`describe` and `it` come from " }, { "type": "link", "title": null, "url": "https://mochajs.org", "children": [ { "type": "text", "value": "Mocha" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "`expect` comes from " }, { "type": "link", "title": null, "url": "http://www.chaijs.com", "children": [ { "type": "text", "value": "Chai" } ] } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress builds on these popular tools and frameworks that you hopefully\nalready have some familiarity and knowledge of. If not, that's okay too." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Write a real test" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "A solid test generally covers 3 phases:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Set up the application state." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Take an action." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Make an assertion about the resulting application state." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You might also see this phrased as \"Given, When, Then\", or \"Arrange, Act,\nAssert\". But the idea is: First you put the application into a specific state,\nthen you take some action in the application that causes it to change, and\nfinally you check the resulting application state." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Today, we'll take a narrow view of these steps and map them cleanly to Cypress\ncommands:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Visit a web page." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Query for an element." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Interact with that element." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Assert about the content on the page." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Step 1: Visit a page" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "First, let's visit a web page. We will visit our\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-example-kitchensink", "children": [ { "type": "text", "value": "Kitchen Sink" } ] }, { "type": "text", "value": " application in this example\nso that you can try Cypress out without needing to worry about finding a page to\ntest." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We can pass the URL we want to visit to " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/visit.md", "children": [ { "type": "text", "value": "`cy.visit()`" } ] }, { "type": "text", "value": ".\nLet's replace our previous test with the one below that actually visits a page:" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('Visits the Kitchen Sink', () => {\n cy.visit('https://example.cypress.io')\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Save the file and switch back over to the Cypress Test Runner. You might notice\na few things:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md#Command-Log", "children": [ { "type": "text", "value": "Command Log" } ] }, { "type": "text", "value": " now shows\nthe new `VISIT` action." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The Kitchen Sink application has been loaded into the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md", "children": [ { "type": "text", "value": "App" } ] }, { "type": "text", "value": "." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The test is green, even though we made no assertions." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The `VISIT` displays a blue pending state until the page finishes\nloading." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Had this request come back with a non `2xx` status code such as `404` or `500`,\nor if there was a JavaScript error in the application's code, the test would\nhave failed." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Step 2: Query for an element" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Now that we've got a page loaded, we need to take some action on it. Why don't\nwe click a link on the page? Sounds easy enough, let's go look for one we\nlike... how about `type`?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To find this element by its contents, we'll use\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/contains.md", "children": [ { "type": "text", "value": "cy.contains()" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Let's add it to our test and see what happens:" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('finds the content \"type\"', () => {\n cy.visit('https://example.cypress.io')\n cy.contains('type')\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Our test should now display `CONTAINS` in the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md#Command-Log", "children": [ { "type": "text", "value": "Command Log" } ] }, { "type": "text", "value": " and still be green." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Even without adding an assertion, we know that everything is okay! This is\nbecause many of Cypress' commands are built to fail if they don't find what\nthey're expecting to find. This is known as an\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#Implicit-Assertions", "children": [ { "type": "text", "value": "Implicit Assertion" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To verify this, replace `type` with something not on the page, like `hype`.\nYou'll notice the test goes red, but only after about 4 seconds!" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Can you see what Cypress is doing under the hood? It's automatically waiting and\nretrying because it expects the content to eventually be found in the DOM.\nIt doesn't immediately fail!" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Error Messages" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress provides detailed, human-readable error messages that explain exactly what went wrong. In this case, Cypress timed out retrying to find the content `hype` within the entire page. These descriptive error messages help you quickly understand and fix issues in your tests. For more information about how Cypress displays errors, see " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/debugging.md#Errors", "children": [ { "type": "text", "value": "Debugging Errors" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Before we add another command - let's get this test back to passing. Replace\n`hype` with `type`." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Step 3: Click an element" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Ok, now we want to click on the link we found. How do we do that? Add a\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/click.md", "children": [ { "type": "text", "value": ".click()" } ] }, { "type": "text", "value": " command to the end of the previous command, like\nso:" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('clicks the link \"type\"', () => {\n cy.visit('https://example.cypress.io')\n\n cy.contains('type').click()\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can almost read it like a little story! Cypress calls this \"chaining\" and we\nchain together commands to build tests that really express what the app does in\na declarative way." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Also note that the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/open-mode.md", "children": [ { "type": "text", "value": "App" } ] }, { "type": "text", "value": "\nhas updated further after the click, following the link and showing the\ndestination page:" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Now we can assert something about this new page!" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "✨ IntelliSense is available in your Cypress spec files by adding a special\ntriple slash comment line. Read about\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/IDE-integration.md#Triple-slash-directives", "children": [ { "type": "text", "value": "Intelligent Code Completion" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Step 4: Make an assertion" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Let's make an assertion about something on the new page we clicked into. Perhaps\nwe'd like to make sure the new URL is the expected URL. We can do that by\nlooking up the URL and chaining an assertion to it with\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/should.md", "children": [ { "type": "text", "value": ".should()" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Here's what that looks like:" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('clicking \"type\" navigates to a new url', () => {\n cy.visit('https://example.cypress.io')\n\n cy.contains('type').click()\n\n // Should be on a new URL which\n // includes '/commands/actions'\n cy.url().should('include', '/commands/actions')\n })\n})" }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Adding more commands and assertions" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We are not limited to a single interaction and assertion in a given test. In\nfact, many interactions in an application may require multiple steps and are\nlikely to change your application state in more than one way." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We can continue the interactions and assertions in this test by adding another\nchain to interact with and verify the behavior of elements on this new page." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We can use " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/get.md", "children": [ { "type": "text", "value": "cy.get()" } ] }, { "type": "text", "value": " to select an element based on its\nclass. Then we can use the " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/type.md", "children": [ { "type": "text", "value": ".type()" } ] }, { "type": "text", "value": " command to enter text\ninto the selected input. Finally, we can verify that the value of the input\nreflects the text that was typed with another " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/should.md", "children": [ { "type": "text", "value": ".should()" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In general, the structure of your test should flow query -> query -> command or\nassertion(s). It's best practice not to chain anything after an action command;\nfor more details on why this is, see our guide on\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/retry-ability.md", "children": [ { "type": "text", "value": "retry-ability" } ] }, { "type": "text", "value": "." } ] }, { "type": "code", "lang": "js", "meta": null, "value": "describe('My First Test', () => {\n it('Gets, types and asserts', () => {\n cy.visit('https://example.cypress.io')\n\n cy.contains('type').click()\n\n // Should be on a new URL which\n // includes '/commands/actions'\n cy.url().should('include', '/commands/actions')\n\n // Get an input, type into it\n cy.get('.action-email').type('fake@email.com')\n\n // Verify that the value has been updated\n cy.get('.action-email').should('have.value', 'fake@email.com')\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "And there you have it: a short test in Cypress that visits a page, finds and\nclicks a link, verifies the URL and then verifies the behavior of an element on\nthe new page. If we read it out loud, it might sound like:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Visit: `https://example.cypress.io`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Find the element with content: `type`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Click on it" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Get the URL" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Assert it includes: `/commands/actions`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Get the input with the `action-email` class" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Type `fake@email.com` into the input" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Assert the input reflects the new value" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Or in the Given, When, Then syntax:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Given a user visits `https://example.cypress.io`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "When they click the link labeled `type`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "And they type \"" }, { "type": "link", "title": null, "url": "mailto:fake@email.com", "children": [ { "type": "text", "value": "fake@email.com" } ] }, { "type": "text", "value": "\" into the input that has a class of `action-email`\ninput" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Then the URL should include `/commands/actions`" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "And the `[class=\"action-email\"]` input has \"" }, { "type": "link", "title": null, "url": "mailto:fake@email.com", "children": [ { "type": "text", "value": "fake@email.com" } ] }, { "type": "text", "value": "\" as its\nvalue" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "And hey, this is a very clean test! We didn't have to say anything about how\nthings work, just that we'd like to verify a particular series of events and\noutcomes." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Page Transitions" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Worth noting is that this test transitioned across two different pages." } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The initial " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/visit.md", "children": [ { "type": "text", "value": "cy.visit()" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/click.md", "children": [ { "type": "text", "value": ".click()" } ] }, { "type": "text", "value": " to a new page" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress automatically detects things like a `page transition event` and will\nautomatically halt running commands until the next page has finished\nloading." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Had the next page not finished its loading phase, Cypress would have ended\nthe test and presented an error." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Under the hood - this means you don't have to worry about commands accidentally\nrunning against a stale page, nor do you have to worry about running commands\nagainst a partially loaded page." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We mentioned previously that Cypress waited 4 seconds before timing out\nfinding a DOM element - but in this case, when Cypress detects a\n`page transition event` it automatically increases the timeout to 60 seconds\nfor the single `PAGE LOAD` event." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In other words, based on the commands and the events happening, Cypress\nautomatically alters its expected timeouts to match web application behavior." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "These various timeouts are defined in the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#Timeouts", "children": [ { "type": "text", "value": "Configuration" } ] }, { "type": "text", "value": " document." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Record Tests with Cypress Studio" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you want a minimal code approach to creating tests, you can use\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/cypress-studio.md", "children": [ { "type": "text", "value": "Cypress Studio" } ] }, { "type": "text", "value": " to record your browser\ninteractions and generate tests. With a " }, { "type": "link", "title": null, "url": "/llm/markdown/cloud/get-started/introduction.md", "children": [ { "type": "text", "value": "Cypress Cloud" } ] }, { "type": "text", "value": " account, you also get Studio AI—assertion recommendations as you record. Visit our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/cypress-studio.md", "children": [ { "type": "text", "value": "guide" } ] }, { "type": "text", "value": " for more information." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Next steps" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/end-to-end-testing/testing-your-app.md", "children": [ { "type": "text", "value": "Test your own app" } ] }, { "type": "text", "value": " — apply what you learned here to a real project." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md", "children": [ { "type": "text", "value": "Introduction to Cypress" } ] }, { "type": "text", "value": " — understand how Cypress really works under the hood." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/best-practices.md", "children": [ { "type": "text", "value": "Best Practices" } ] }, { "type": "text", "value": " — learn selector strategies, state management, and patterns for maintainable tests." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/ai-skills.md", "children": [ { "type": "text", "value": "Cypress AI Skills" } ] }, { "type": "text", "value": " — use your AI coding tool to write, fix, and review Cypress tests with best practices built in." } ] } ] } ] } ] }, "token_estimate": 2651 }