{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/basic-santity-testing-rocks","result":{"data":{"markdownRemark":{"html":"<p>Testing an existing app can be very boring. We're all trying to get humans automated out of it and let the great tools and framework do the heavy lifting for us instead. Things like <a href=\"https://cypress.io\">Cypress</a> and <a href=\"https://www.protractortest.org/\">Protractor</a> do wonders in that respect. </p>\n<p>Testing an existing app due to some sort of infrastructure change is even more boring - you're forced to verify your app just because something in the technology stack or delivery pipeline's changing. So when a change like that happens and the app under change does not have a battery of tests in place, what do you do? </p>\n<p>I'd suggest doing a sanity (\"smoke\") test by doing a very simple URL fetch test of the top N pages of your site, looking to get 200 response codes. Depending on your website's traffic that \"N\" can be whatever makes the most sense. In one case I took top 900 pages as they had over a 1000 page views in the last month. In another I took pages with more than a 100 page views as the site's traffic was a lot less. Either way, I'm suggesting to get some data from your analytics engine and pick a list of most visited pages from there. In case of Google Analytics, looking at the <strong>Behaviour > Site Content > All Pages</strong>, adjusting \"show rows\" to show as many as needed and than <strong>Export > CSV</strong> (at the very top of that screen). That should give you a list of pages with their relative URLs.</p>\n<h2>Using Cypress.io fixtures to sanity test your site</h2>\n<p>Once we have the list of URLs that are popular, we can create a <a href=\"https://docs.cypress.io/api/commands/fixture.html#Syntax\">test fixture</a> in Cypress where the URLs would be used to feed a single test. </p>\n<p>To get started with this, take the CSV you got from analytics and leave only the URL column (call it <strong>url</strong>). Then, head out to something like <a href=\"https://www.freeformatter.com/csv-to-json-converter.html\">freeformatter.com</a> and convert your input CSV to JSON. You should get a JSON that looks like more or less like:</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-json line-numbers\"><code class=\"language-json\"><span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span><span class=\"token property\">\"url\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"/page/1\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span><span class=\"token property\">\"url\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"/page/2\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span><span class=\"token property\">\"url\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"/page/another/a\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ...\n<span class=\"token punctuation\">]</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>I call this the \"sitemap test\" so the fixture for Cypress should be called <code class=\"language-text\">cypress/fixtures/sitemap.json</code>.</p>\n<p>The actual Cypress test is <code class=\"language-text\">cypress/integration/sitemap.js</code> and it looks like:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token comment\">/**\n * to test the general structure of the site and verify that the core set of \n * pages works without a glitch - 200s, no 4xx or 5xx responses on all!\n */</span>\n<span class=\"token function\">context</span><span class=\"token punctuation\">(</span><span class=\"token string\">'General Sitemap sanity tests (ensure main pages / most popular pages are working)'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">beforeEach</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n    <span class=\"token function\">it</span><span class=\"token punctuation\">(</span><span class=\"token string\">'should open pages with a 2xx response and never show the 5xx error message'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// load the fixture with the URLs we're interested in</span>\n        cy<span class=\"token punctuation\">.</span><span class=\"token function\">fixture</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sitemap.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">sitemap</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token keyword\">in</span> sitemap<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token comment\">// do a Cypress HTTP Request</span>\n                cy<span class=\"token punctuation\">.</span><span class=\"token function\">request</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n                    url<span class=\"token punctuation\">:</span> sitemap<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>url<span class=\"token punctuation\">,</span>\n                    followRedirect<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n                    failOnStatusCode<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span> <span class=\"token comment\">// we want to let the test run through the list of URLs and not stop</span>\n                  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n                    <span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">resp</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                      <span class=\"token comment\">// we could verify it's 200 </span>\n                      <span class=\"token comment\">// expect(resp.status).to.eq(200)</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>At first I thought it may be useful to always check for getting 2xx response codes but then due to differences between QA/PROD it seemed appropriate to also just run through the list of tests and if occasional 404 happens simply ignore it. So perhaps the expect should be most useful to check for non-5xx. I'm still undecided about that last bit.</p>\n<p>Either way, running through this large list of URLs gives a nice, fuzzy feeling of going through a basic sanity test for a big portion of the app and noticing quickly if something's not right due to the latest deployment push. </p>","excerpt":"Testing an existing app can be very boring. We're all trying to get humans automated out of it and let the great tools and framework do the heavy lifting for us…","frontmatter":{"date":"18 January, 2020","path":"/blog/basic-santity-testing-rocks","title":"On importance of simple, basic sanity testing and how Cypress fixtures can help"},"fields":{"readingTime":{"text":"4 min read"}}}},"pageContext":{}}}