{"id":3942,"date":"2021-01-18T07:00:00","date_gmt":"2021-01-18T07:00:00","guid":{"rendered":"https:\/\/www.diogonunes.com\/blog\/?p=3942"},"modified":"2023-07-16T12:27:01","modified_gmt":"2023-07-16T11:27:01","slug":"cypress-tips-tricks","status":"publish","type":"post","link":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/","title":{"rendered":"Tips &#038; Tricks for Cypress"},"content":{"rendered":"<figure id=\"attachment_3949\" aria-describedby=\"caption-attachment-3949\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash.jpg?resize=580%2C387&#038;ssl=1\" alt=\"\" width=\"580\" height=\"387\" class=\"size-large wp-image-3949\" srcset=\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=1024%2C683&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=400%2C267&amp;ssl=1 400w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=768%2C512&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=1536%2C1024&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=2048%2C1365&amp;ssl=1 2048w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=1200%2C800&amp;ssl=1 1200w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?resize=1980%2C1320&amp;ssl=1 1980w, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?w=1740&amp;ssl=1 1740w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption id=\"caption-attachment-3949\" class=\"wp-caption-text\"><span>Photo by <a href=\"https:\/\/unsplash.com\/@hnhmarketing?utm_source=unsplash&#038;utm_medium=referral&#038;utm_content=creditCopyText\">Hunter Haley<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=unsplash&#038;utm_medium=referral&#038;utm_content=creditCopyText\">Unsplash<\/a><\/span><\/figcaption><\/figure>\n<blockquote>\n<p>\ud83c\udfc6 This post was <strong>featured<\/strong> in <a href=\"https:\/\/softwaretestingweekly.com\/issues\/55\">Software Testing Weekly, issue 55<\/a><\/p>\n<\/blockquote>\n<p>This is a collection of simple and recurring scenarios when writing Cypress tests. For more complex recipes, check the <a href=\"https:\/\/docs.cypress.io\/examples\/examples\/recipes.html\">official doc<\/a>.<\/p>\n<ul>\n<li><strong>Setup<\/strong>\n<ul>\n<li>Abort cypress after first failed test<\/li>\n<li>Read a test file from fixtures<\/li>\n<\/ul>\n<\/li>\n<li><strong>Assertions<\/strong>\n<ul>\n<li>Assert the text of a page (string or number)<\/li>\n<li>Assert the number of elements selected<\/li>\n<li>Assert the result of two Cypress commands<\/li>\n<\/ul>\n<\/li>\n<li><strong>Actions<\/strong>\n<ul>\n<li>Upload a file<\/li>\n<\/ul>\n<\/li>\n<li><strong>Selectors<\/strong>\n<ul>\n<li>Given a list, return row that contains specific text<\/li>\n<li>Selector is flaky due to page redesigns<\/li>\n<li>Type text into input field and press enter<\/li>\n<li>Select element inside iframe<\/li>\n<li>Use selector X to narrow down area, and then use selector Y to find element<\/li>\n<\/ul>\n<\/li>\n<li><strong>Waits<\/strong>\n<ul>\n<li>Wait until a network (ie. HTTP\/XHR) request resolves<\/li>\n<li>Wait until a condition becomes true<\/li>\n<\/ul>\n<\/li>\n<li><strong>Mocks<\/strong>\n<ul>\n<li>Force a specific response to an HTTP request<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<hr \/>\n<h3>Setup<\/h3>\n<h4>Abort cypress after first failed test<\/h4>\n<p>Add this inside your <code>describe<\/code> block:<\/p>\n<pre><code class=\"js\">afterEach(function() {\n  if (this.currentTest.state === \"failed\") {\n    Cypress.runner.stop()\n  }\n})\n<\/code><\/pre>\n<p>More info on this <a href=\"https:\/\/github.com\/cypress-io\/cypress\/issues\/518\">GitHub thread<\/a>.<\/p>\n<h4>Read a test file from fixtures<\/h4>\n<p>You have <a href=\"https:\/\/github.com\/cypress-io\/cypress\/issues\/3963#issuecomment-483581934\">three ways<\/a> to do it:<\/p>\n<ul>\n<li><code>.fixture()<\/code> inside an <code>it<\/code><\/li>\n<li><code>.fixture()<\/code> inside a <code>before<\/code> or <code>beforeEach<\/code><\/li>\n<li><code>require<\/code><\/li>\n<\/ul>\n<hr \/>\n<h3>Assertions<\/h3>\n<h4>Assert the text of a page (string or number)<\/h4>\n<p>Your page has text, some are words some are numbers. It&#8217;s not <a href=\"https:\/\/github.com\/cypress-io\/cypress\/issues\/630\">straightforward<\/a> to get the text of a page:<\/p>\n<pre><code class=\"js\">cy.get(\"selector\").invoke(\"text\") \/\/ built-in with cypress\ncy.get(\"selector\").text() \/\/ requires https:\/\/github.com\/Lakitna\/cypress-commands\n<\/code><\/pre>\n<p>Note that the code above will return a Chainable object, not a string. Meaning you can do <code>...text().should(\"be.not.empty\")<\/code> but you cannot do <code>expect(...text()).to.be.not.empty()<\/code>.<\/p>\n<p>When asserting numbers, it&#8217;s safer to do:<\/p>\n<pre><code class=\"js\">cy.get(\"selector\")\n  .text()\n  .then(str =&gt; Number(str))\n  .should(\"be.above\", 2)\n<\/code><\/pre>\n<h4>Assert the number of elements selected<\/h4>\n<pre><code class=\"js\">\/\/ assert number of elements selected\ncy.get(\"selector\")\n  .find(\"child-selector\")\n  .should(\"have.length\", 4)\n\n\/\/ but for comparisons other than equal, you need this syntax\ncy.get(\"selector\")\n  .find(\"child-selector\")\n  .its(\"length\")\n  .should(\"be.gte\", 4) \/\/ greater than or equal\n<\/code><\/pre>\n<h4>Assert the result of two Cypress commands<\/h4>\n<p>It is not recommended that you assign return values of Cypress commands (async):<\/p>\n<pre><code class=\"js\">const textBeforeClick = cy.get(\"#btn\").text()\ncy.get(\"#btn\").click()\nconst textAfterClick = cy.get(\"#btn\").text()\nexpect(textBeforeClick).not.to.eq(textAfterClick)\n<\/code><\/pre>\n<p>Alternatively, you can use <a href=\"https:\/\/docs.cypress.io\/api\/commands\/as.html#Syntax\">aliasing<\/a> to do <a href=\"https:\/\/github.com\/cypress-io\/cypress\/issues\/630#issuecomment-524689538\">this<\/a>:<\/p>\n<pre><code class=\"js\">cy.get(\"#btn\")\n  .text()\n  .as(\"textBeforeClick\")\ncy.get(\"#btn\").click()\ncy.get(\"#btn\")\n  .text()\n  .should(\"not.equal\", this.textBeforeClick)\n<\/code><\/pre>\n<hr \/>\n<h3>Actions<\/h3>\n<h4>Upload a file<\/h4>\n<pre><code class=\"js\">Cypress.Commands.add(\"uploadFile\", (selector, fileName, mimeType) =&gt;\n  cy.get(selector).then(input =&gt;\n    cy\n      .fixture(fileName, \"base64\")\n      .then(Cypress.Blob.base64StringToBlob)\n      .then(blob =&gt; {\n        const element = input[0]\n        const testFile = new File([blob], fileName, {\n          type: mimeType\n        })\n        const dataTransfer = new DataTransfer()\n        dataTransfer.items.add(testFile)\n        element.files = dataTransfer.files\n        element.dispatchEvent(new Event(\"change\", { bubbles: true }))\n      })\n  )\n)\n<\/code><\/pre>\n<hr \/>\n<h3>Selectors<\/h3>\n<h4>Given a list, return row that contains specific text<\/h4>\n<p><code>cy.contains(\"text\")<\/code> is not as eficient or precise as the alternative below.<\/p>\n<p><code>cy.contains(\"selector\", \"text\")<\/code> returns all elements that match the selector AND contain the text.<\/p>\n<pre><code class=\"js\">cy.contains(\"#results li.item\", \"Lisbon (District)\")\n<\/code><\/pre>\n<h4>Selector is flaky due to page redesigns<\/h4>\n<p>Write a selector that searches by data atribute, instead of id or css path.<\/p>\n<pre><code class=\"html\">&lt;!-- code.html --&gt;\n&lt;input data-cy=\"searchBar\" class=\"...\" \/&gt;\n<\/code><\/pre>\n<pre><code class=\"js\">\/\/ test.spec.js\ncy.get(\"[data-cy='searchBar']\")\n<\/code><\/pre>\n<h4>Type text into input field and press enter<\/h4>\n<p>You can combine JS <a href=\"https:\/\/stackoverflow.com\/a\/32202320\/675577\">template strings<\/a> with Cypress <a href=\"https:\/\/docs.cypress.io\/api\/commands\/type.html#Arguments\">Enter<\/a> special key.<\/p>\n<pre><code class=\"js\">const text = \"text to input on search\"\ncy.get(\"selector\").type(`${text}{enter}`)\n<\/code><\/pre>\n<h4>Select element inside iframe<\/h4>\n<p>Use the <a href=\"https:\/\/www.npmjs.com\/package\/cypress-iframe\">cypress-iframe<\/a> plugin and follow their instructions.<\/p>\n<h4>Use selector <code>X<\/code> to narrow down area, and then use selector <code>Y<\/code> to find element<\/h4>\n<p>Simple selectors tend to match more elements than you want. You might want use your simple selector after narrowing down the search with another selector. Use <a href=\"https:\/\/docs.cypress.io\/api\/commands\/find.html\"><code>cy.find<\/code><\/a>.<\/p>\n<pre><code class=\"js\">cy.contains(\"li.todo\", \"My task\") \/\/ &lt;-- narrow down\n  .should(\"exist\")\n  .find('input[type=\"checkbox\"]') \/\/ &lt;-- get what you want\n  .check()\n<\/code><\/pre>\n<hr \/>\n<h3>Waits<\/h3>\n<p>Avoid as much as possible doing <code>cy.wait(milli)<\/code>. There are other, more efficient, ways.<\/p>\n<h4>Wait until a network (ie. HTTP\/XHR) request resolves<\/h4>\n<p>You need to wait for an HTTP request to finish to continue with your test. You don&#8217;t start the request, it is made implicitly by the system you&#8217;re testing. The UI doesn&#8217;t tell you for sure if the request finished. To be accurate you need to listen at the network level. <a href=\"https:\/\/github.com\/cypress-io\/testing-workshop-cypress\/blob\/master\/slides\/05-xhr\/PITCHME.md\">(read more)<\/a><\/p>\n<pre><code class=\"js\">cy.server() \/\/ starts a listener of network requests\ncy.route(\"GET\", \"\/todos\") \/\/ tells cypress the endpoint we want to spy\n  .as(\"listAll\") \/\/ gives it a name\/alias\n\ncy.visit(\"\/\") \/\/ this page implicitly calls the spied endpoint\ncy.wait(\"@listAll\") \/\/ cy.server spies the endpoint and waits until a reply\n<\/code><\/pre>\n<h4>Wait until a condition becomes true<\/h4>\n<p>Using the <a href=\"https:\/\/github.com\/NoriSte\/cypress-wait-until\">waitUntil<\/a> plugin you can execute\/repeat code until a given condition becomes true. This is useful when your code depends on some external background tasks (e.g. cron job).<\/p>\n<pre><code class=\"js\">cy.waitUntil(\n  () =&gt;\n    cy\n      .request(targetSite)\n      .its(\"status\")\n      .then(status =&gt; status === 200),\n  {\n    interval: 5000, \/\/ tries every 5s\n    timeout: 30000, \/\/ gives up after 30s\n    errorMsg: `Timed out pinging ${targetSite}`\n  }\n)\n<\/code><\/pre>\n<p>Your condition might throw an exception instead of returning false. For instance, if you need to wait until a page element becomes visible, you could try <code>cy.get()<\/code> but that method has a built-in assertion. That means it would fail and exit the <code>waitUntil<\/code> block, instantly failing the test. <a href=\"https:\/\/github.com\/NoriSte\/cypress-wait-until\/issues\/75\">You need an alternative way<\/a>, like a direct jQuery call:<\/p>\n<pre><code class=\"js\">cy.waitUntil(() =&gt; {\n  \/\/ refreshes the page\n  cy.reload()\n  \/\/ returns true, if your element exists in the page\n  return Cypress.$(cssSelector).length &gt; 0\n})\ncy.get(cssSelector).should(\"exist\")\n<\/code><\/pre>\n<hr \/>\n<h3>Mocks<\/h3>\n<p>When writing E2E tests usually we avoid mocks, since the point is to test &#8220;the real deal&#8221;. If you must&#8230;<\/p>\n<h4>Force a specific response to an HTTP request<\/h4>\n<p><code>cy.route<\/code> can both spy network requests or fake responses to those same requests. You just need to pass the response you want, see <a href=\"https:\/\/docs.cypress.io\/api\/commands\/route.html#Syntax\">official doc<\/a>.<\/p>\n<pre><code class=\"js\">cy.route(\"GET\", \"\/todos\").as(\"list\") \/\/ spies the endpoint\n\nconst response = \"...\"\ncy.route(\"GET\", \"\/todos\", response).as(\"list\") \/\/ mocks a response\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfc6 This post was featured in Software Testing Weekly, issue 55 This is a collection of simple and recurring scenarios when writing Cypress tests. For more complex recipes, check the official doc. Setup Abort cypress after first failed test Read a test file from fixtures Assertions Assert the text of a page (string or number) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3949,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[74,55,31],"class_list":["post-3942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-cypress","tag-testing","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tips &amp; Tricks for Cypress - The Geeky Gecko<\/title>\n<meta name=\"description\" content=\"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.\" \/>\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.diogonunes.com\/blog\/cypress-tips-tricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips &amp; Tricks for Cypress - The Geeky Gecko\" \/>\n<meta property=\"og:description\" content=\"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\" \/>\n<meta property=\"og:site_name\" content=\"The Geeky Gecko\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-18T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-16T11:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Diogo Nunes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialexnunes\" \/>\n<meta name=\"twitter:site\" content=\"@dialexnunes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diogo Nunes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\"},\"author\":{\"name\":\"Diogo Nunes\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c\"},\"headline\":\"Tips &#038; Tricks for Cypress\",\"datePublished\":\"2021-01-18T07:00:00+00:00\",\"dateModified\":\"2023-07-16T11:27:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\"},\"wordCount\":637,\"publisher\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c\"},\"image\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1\",\"keywords\":[\"cypress\",\"testing\",\"tutorial\"],\"articleSection\":[\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\",\"url\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\",\"name\":\"Tips & Tricks for Cypress - The Geeky Gecko\",\"isPartOf\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1\",\"datePublished\":\"2021-01-18T07:00:00+00:00\",\"dateModified\":\"2023-07-16T11:27:01+00:00\",\"description\":\"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1\",\"width\":2560,\"height\":1707,\"caption\":\"Photo by Hunter Haley on Unsplash\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.diogonunes.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips &#038; Tricks for Cypress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#website\",\"url\":\"https:\/\/www.diogonunes.com\/blog\/\",\"name\":\"The Geeky Gecko\",\"description\":\"The Geeky Gecko\",\"publisher\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.diogonunes.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c\",\"name\":\"Diogo Nunes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2026\/04\/Geeky-Gecko-2026-v2.png?fit=799%2C799&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2026\/04\/Geeky-Gecko-2026-v2.png?fit=799%2C799&ssl=1\",\"width\":799,\"height\":799,\"caption\":\"Diogo Nunes\"},\"logo\":{\"@id\":\"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.diogonunes.com\",\"https:\/\/x.com\/dialexnunes\"],\"url\":\"https:\/\/www.diogonunes.com\/blog\/author\/diogo-nunes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips & Tricks for Cypress - The Geeky Gecko","description":"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.","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.diogonunes.com\/blog\/cypress-tips-tricks\/","og_locale":"en_US","og_type":"article","og_title":"Tips & Tricks for Cypress - The Geeky Gecko","og_description":"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.","og_url":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/","og_site_name":"The Geeky Gecko","article_published_time":"2021-01-18T07:00:00+00:00","article_modified_time":"2023-07-16T11:27:01+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg","type":"image\/jpeg"}],"author":"Diogo Nunes","twitter_card":"summary_large_image","twitter_creator":"@dialexnunes","twitter_site":"@dialexnunes","twitter_misc":{"Written by":"Diogo Nunes","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#article","isPartOf":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/"},"author":{"name":"Diogo Nunes","@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c"},"headline":"Tips &#038; Tricks for Cypress","datePublished":"2021-01-18T07:00:00+00:00","dateModified":"2023-07-16T11:27:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/"},"wordCount":637,"publisher":{"@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c"},"image":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1","keywords":["cypress","testing","tutorial"],"articleSection":["Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/","url":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/","name":"Tips & Tricks for Cypress - The Geeky Gecko","isPartOf":{"@id":"https:\/\/www.diogonunes.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage"},"image":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1","datePublished":"2021-01-18T07:00:00+00:00","dateModified":"2023-07-16T11:27:01+00:00","description":"This is a collection of simple and recurring scenarios when writing Cypress tests. It covers setup, assertions, actions, selectors, waits and mocks.","breadcrumb":{"@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#primaryimage","url":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1","width":2560,"height":1707,"caption":"Photo by Hunter Haley on Unsplash"},{"@type":"BreadcrumbList","@id":"https:\/\/www.diogonunes.com\/blog\/cypress-tips-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.diogonunes.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tips &#038; Tricks for Cypress"}]},{"@type":"WebSite","@id":"https:\/\/www.diogonunes.com\/blog\/#website","url":"https:\/\/www.diogonunes.com\/blog\/","name":"The Geeky Gecko","description":"The Geeky Gecko","publisher":{"@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.diogonunes.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/a6fa79b293f22912664654fcfbd2da0c","name":"Diogo Nunes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2026\/04\/Geeky-Gecko-2026-v2.png?fit=799%2C799&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2026\/04\/Geeky-Gecko-2026-v2.png?fit=799%2C799&ssl=1","width":799,"height":799,"caption":"Diogo Nunes"},"logo":{"@id":"https:\/\/www.diogonunes.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.diogonunes.com","https:\/\/x.com\/dialexnunes"],"url":"https:\/\/www.diogonunes.com\/blog\/author\/diogo-nunes\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/08\/hunter-haley-s8OO2-t-HmQ-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1","jetpack-related-posts":[{"id":3709,"url":"https:\/\/www.diogonunes.com\/blog\/cypress-automation-template\/","url_meta":{"origin":3942,"position":0},"title":"Cypress Sapling (automation template)","author":"Diogo Nunes","date":"18 May, 2020","format":false,"excerpt":"No need to start with the seed \u2013 plant the sapling! Get it? Because \"Cypress\" is a tree... \ud83e\udd13 On my last project we chose Cypress to automate our E2E tests. During a year and a half we constantly tweaked and improved our test repository. We added more functionary on\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/tzingtao-chow-J8oxnYHBpWM-unsplash-scaled.jpg?fit=960%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/tzingtao-chow-J8oxnYHBpWM-unsplash-scaled.jpg?fit=960%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/tzingtao-chow-J8oxnYHBpWM-unsplash-scaled.jpg?fit=960%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/tzingtao-chow-J8oxnYHBpWM-unsplash-scaled.jpg?fit=960%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3978,"url":"https:\/\/www.diogonunes.com\/blog\/framework-review-cypress\/","url_meta":{"origin":3942,"position":1},"title":"Framework review: Cypress","author":"Diogo Nunes","date":"4 January, 2021","format":false,"excerpt":"Fast and reliable testing for anything that runs in a browser. It uses Javascript to make setting up, writing, running and debugging tests easy \u2014 for QAs and developers. \u2014 Official website Code Example of automation at GitHub. Use cases \ud83e\udd47 Automate end-to-end (E2E) tests using the UI or the\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/09\/herbert-goetsch-vImJ5GYMMqQ-unsplash-1.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/09\/herbert-goetsch-vImJ5GYMMqQ-unsplash-1.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/09\/herbert-goetsch-vImJ5GYMMqQ-unsplash-1.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/09\/herbert-goetsch-vImJ5GYMMqQ-unsplash-1.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/09\/herbert-goetsch-vImJ5GYMMqQ-unsplash-1.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3702,"url":"https:\/\/www.diogonunes.com\/blog\/how-to-build-docker-image-cypress-tests\/","url_meta":{"origin":3942,"position":2},"title":"How to build a Docker image ready to run Cypress tests","author":"Diogo Nunes","date":"11 May, 2020","format":false,"excerpt":"My team decided to build a Docker image that contained Cypress, dependencies and all our end-to-end (E2E) tests. That way, anyone could simply pull the image and with a single command it was ready to run tests. Also, the developers and the CI pipeline we both using the same image,\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/cypress-on-docker.png?fit=1200%2C488&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/cypress-on-docker.png?fit=1200%2C488&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/cypress-on-docker.png?fit=1200%2C488&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/cypress-on-docker.png?fit=1200%2C488&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/cypress-on-docker.png?fit=1200%2C488&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3717,"url":"https:\/\/www.diogonunes.com\/blog\/cypress-pageobjects-inheritance-js\/","url_meta":{"origin":3942,"position":3},"title":"Cypress: PageObjects using inheritance","author":"Diogo Nunes","date":"1 June, 2020","format":false,"excerpt":"Scenario: Your web site is deployed on several countries. The behaviour of the page you want to test (e.g. sign up) is mostly the same across countries, however some business rules change per country. You are using the PageObjects pattern to encapsulate the details of each page. You want to\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/68747470733a2f2f65726c616e67656e776c6164696d69722e66696c65732e776f726470726573732e636f6d2f323031352f30352f6d6174726a6f7363686b612d332e6a7067.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/68747470733a2f2f65726c616e67656e776c6164696d69722e66696c65732e776f726470726573732e636f6d2f323031352f30352f6d6174726a6f7363686b612d332e6a7067.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/68747470733a2f2f65726c616e67656e776c6164696d69722e66696c65732e776f726470726573732e636f6d2f323031352f30352f6d6174726a6f7363686b612d332e6a7067.jpeg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/68747470733a2f2f65726c616e67656e776c6164696d69722e66696c65732e776f726470726573732e636f6d2f323031352f30352f6d6174726a6f7363686b612d332e6a7067.jpeg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/68747470733a2f2f65726c616e67656e776c6164696d69722e66696c65732e776f726470726573732e636f6d2f323031352f30352f6d6174726a6f7363686b612d332e6a7067.jpeg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3685,"url":"https:\/\/www.diogonunes.com\/blog\/asserting-text-using-cypress\/","url_meta":{"origin":3942,"position":4},"title":"Asserting text using Cypress","author":"Diogo Nunes","date":"6 July, 2020","format":false,"excerpt":"If you're using Cypress, eventually you will have to assert some text. However, they provide at least three methods to do that, and from the documentation is not clear the difference between: .should(\"have.text\", \"expected text goes here\") .should(\"include.text\", \"expected text goes here\") .should(\"contain.text\", \"expected text goes here\") Do they all\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"Photo by Sunyu on Unsplash","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/sunyu-jtjS4F8Q7sY-unsplash-scaled.jpg?fit=1200%2C798&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/sunyu-jtjS4F8Q7sY-unsplash-scaled.jpg?fit=1200%2C798&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/sunyu-jtjS4F8Q7sY-unsplash-scaled.jpg?fit=1200%2C798&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/sunyu-jtjS4F8Q7sY-unsplash-scaled.jpg?fit=1200%2C798&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/04\/sunyu-jtjS4F8Q7sY-unsplash-scaled.jpg?fit=1200%2C798&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3590,"url":"https:\/\/www.diogonunes.com\/blog\/cypress-pageobjects-vs-appactions\/","url_meta":{"origin":3942,"position":5},"title":"Cypress: PageObjects vs AppActions","author":"Diogo Nunes","date":"2 March, 2020","format":false,"excerpt":"I use Selenium to write most of my automated checks, and the PageObjects pattern is a must. My current team is using Cypress and, to my surprise, this test framework recommends AppActions instead of PageObjects. So I decided to benchmark both patterns using the following criteria: Can it abstract page\u2026","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"https:\/\/www.diogonunes.com\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/02\/jason-dent-JVD3XPqjLaQ-unsplash.jpg?fit=1141%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/02\/jason-dent-JVD3XPqjLaQ-unsplash.jpg?fit=1141%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/02\/jason-dent-JVD3XPqjLaQ-unsplash.jpg?fit=1141%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/02\/jason-dent-JVD3XPqjLaQ-unsplash.jpg?fit=1141%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.diogonunes.com\/blog\/wp-content\/uploads\/2020\/02\/jason-dent-JVD3XPqjLaQ-unsplash.jpg?fit=1141%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/posts\/3942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/comments?post=3942"}],"version-history":[{"count":3,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/posts\/3942\/revisions"}],"predecessor-version":[{"id":4750,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/posts\/3942\/revisions\/4750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/media\/3949"}],"wp:attachment":[{"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/media?parent=3942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/categories?post=3942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.diogonunes.com\/blog\/wp-json\/wp\/v2\/tags?post=3942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}