<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ user testing - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ user testing - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 26 Jul 2026 22:34:20 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/user-testing/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Software Testing – Beginner's Guide ]]>
                </title>
                <description>
                    <![CDATA[ What is Software Testing? Let's say you're working on a coding project. You have been writing a bunch of code and staying up late at night to fix bugs. All this is part of the process before you release that software product.  Then you'll check your ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/software-testing-for-beginners/</link>
                <guid isPermaLink="false">66c71fe2cfe24f9b8645574a</guid>
                
                    <category>
                        <![CDATA[ beginners guide ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ unit testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user testing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Mabel Obadoni ]]>
                </dc:creator>
                <pubDate>Mon, 07 Mar 2022 23:14:46 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/02/Talk2Her-Foundation--4-.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="heading-what-is-software-testing">What is Software Testing?</h2>
<p>Let's say you're working on a coding project. You have been writing a bunch of code and staying up late at night to fix bugs. All this is part of the process before you release that software product. </p>
<p>Then you'll check your code to verify that it actually performs what it's been programmed to do. This is where software testing comes in.</p>
<p>This article will discuss the categories of Software Testing and the different types of testing developers most commonly use. You'll see that some of the tests are named for their function. So, when I say API test, I am referring to the tests carried out on the APIs consumed in your source code. </p>
<p>But before going further, let's make sure we know what we mean by Software Testing.</p>
<p>In simple terms, Software Testing is the process of checking the various aspects of a software product to validate the software’s specifications and make sure it's ready to use.</p>
<h2 id="heading-objectives-of-software-testing">Objectives of Software Testing</h2>
<p>From a single line code to a block of code, and even to the finished product, you test software to:</p>
<ul>
<li>check for defects and ensure that the product performs as specified</li>
<li>make sure that the product meets market standards</li>
<li>resolve any loopholes at the production stage</li>
<li>prevent future malfunctions of the product</li>
</ul>
<h2 id="heading-characteristics-of-software-testing">Characteristics of Software Testing</h2>
<p>When you test your software, you want to make sure that your tests are:</p>
<ul>
<li>Practical</li>
<li>Reliable</li>
<li>Authentic</li>
<li>Capable of finding errors</li>
<li>Capable of checking the validity of your software</li>
</ul>
<h2 id="heading-when-should-you-test-your-software">When Should You Test Your Software?</h2>
<p>When you test your software will depend on what test you're wanting to perform.</p>
<p>You can test your software during the software development phase – that is, when writing the source code, as in the case of unit testing, API testing, and others. </p>
<p>You can also test after the software has been developed such as in User Interface (UI) Testing.</p>
<h2 id="heading-when-should-testing-stop">When Should Testing Stop?</h2>
<p>You can stop testing your software when:</p>
<ul>
<li>All the necessary tests have been carried out efficiently</li>
<li>Bugs in the source codes have been reduced to the barest minimum or eradicated</li>
<li>Testers are done testing</li>
<li>Product is fully secured against threats</li>
<li>The product is released</li>
</ul>
<h2 id="heading-software-testing-methods"><strong>Software Testing Methods</strong></h2>
<p>Now that you know what Software Testing means, how exactly is it done? </p>
<p>Software Testing is done based on two main methods:</p>
<ol>
<li>Functional Testing</li>
<li>Non-functional Testing</li>
</ol>
<p>The major difference between these categories of  Software Testing is that Functional Testing tests the functionality of a software product while non-functional testing concentrates on the performance of the software product.  </p>
<h3 id="heading-functional-testing"><strong>Functional Testing</strong></h3>
<p>Functional testing is the process of testing software to validate its usefulness with regard to its specifications.</p>
<p>In simple terms, it consists of various tests carried out on the software generally to verify its functionalities.</p>
<p>Functional testing helps the software team know if the software is working as required. Mind you, Functional Testing doesn't mean testing unit functions or modules.</p>
<h3 id="heading-examples-of-functional-testing">Examples of Functional Testing</h3>
<h4 id="heading-unit-testing">Unit Testing</h4>
<p>In unit testing, you test individual units or functions of your software's source code. Unit testing can be done automatically or manually.</p>
<p>Automatic unit testing happens with human assistance while manual unit testing is actively done by humans.</p>
<p>The difference between these two methods is that the former is automated while the latter requires hard-coding.</p>
<p>The purpose of unit testing is to ensure that each unit component is working as expected.</p>
<h4 id="heading-api-testing">API Testing</h4>
<p>An application Programming Interface (or API) is a link between your program and an external source. So, if you want your program to do more than just what you code, you could employ the features of another program also. This is what consuming APIs is all about. </p>
<p>For instance, let's say that I want my application to have a map feature. Instead of coding one from the scratch, I could save myself some time and stress by using one of the readily available map APIs.   </p>
<p>Using APIs, especially from external sources, comes with its pros and cons, though. And I bet you want to reduce the cons as much as possible. Well, this is why you need to test the API prior to product release. </p>
<p>When you consume a public or private API, while developing your software, you should check for the API's reliability, security, and effectiveness in your product prior to release. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/API.png" alt="Image" width="600" height="400" loading="lazy">
<em>Image representing API</em></p>
<h4 id="heading-ui-user-interface-testing">UI (User interface) Testing</h4>
<p>The User Interface is the channel of communication between the user and the software. </p>
<p>Every software product is developed with certain specifications for the User Interface. This means that the way the user interacts with the application is predetermined prior to developing the product.</p>
<p> In order to make sure that these specifications are met according to design, you can carry out tests on the UI – and this is known as UI Testing.</p>
<p>The UI Testing involves things like checking if the Sign-Up page is correctly accepting inputs, checking to see if the submit button is functional, and a host of other UI features. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/Signup-page3--1-.png" alt="Image" width="600" height="400" loading="lazy">
<em>Image of a Payment Page</em></p>
<h4 id="heading-integration-testing">Integration Testing</h4>
<p>Putting components into groups for testing is known as integration testing. Integration testing involves checking how each separate component works together to achieve the common aim of the product. </p>
<p>For instance, in an e-commerce application, the integration tests can check how the Home page connects to the Carts page when the Cart menu is clicked. </p>
<p>The purpose of integration testing is to make sure that components are working in synchrony – that is, that component A works well with component B.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/LOGIN_SIGNUP-PAGE.png" alt="Image" width="600" height="400" loading="lazy">
<em>Image of two UI pages</em></p>
<h4 id="heading-regression-testing">Regression Testing</h4>
<p>Software Development involves iteration, which often happens because of bugs in the source code. </p>
<p>After debugging your code, updating the software program, or making any other change to your code, you should test that software to validate its functionality. This testing is called Regression testing. </p>
<p>Examples of regression testing are corrective regression testing, selective regression testing, progressive regression testing, and others.</p>
<h3 id="heading-non-functional-or-performance-testing"><strong>Non-functional or Performance Testing</strong></h3>
<p>Non-functional testing refers to the various tests carried out on a product to check its readiness for the market. Non-functional Tests go a step further to ensure the viability of a product and its worth.</p>
<h3 id="heading-examples-of-non-functional-testing">Examples of Non-functional Testing</h3>
<h4 id="heading-volume-testing">Volume Testing</h4>
<p>The strength of every product lies in its ability to handle different volumes of data. Some software may not function with a large database. To avoid such breakage, you can do volume tests. </p>
<p>Volume test involves feeding a large database to the software to check its functionality based on the large volume of data. Testing your product on different volumes of data shows that your product can withstand more or fewer data at a given time.</p>
<h4 id="heading-security-testing">Security Testing</h4>
<p>In the world today, security is an important and much-discussed topic. Concerns range from physical security down to cyberspace – and everyone wants that assurance of safety when they are on the internet.</p>
<p>One of the issues you'll want to avoid as a software developer is threats to your application. You can perform security testing on your software product to check its level of vulnerability. </p>
<p>Security tests include authentication, authorization confidentiality, and other measures required to protect your software from risks and threats.</p>
<h2 id="heading-where-to-put-test-files-in-a-program-folder">Where to put test files in a program folder</h2>
<p>Your test files should be together in a test folder inside the root folder of your project. This is for easy navigation and integration into your project.</p>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>Now that you know the importance of testing in software development, you should make sure to write code that is error and bug-free when tested.</p>
<p>This will reduce the time you waste fixing bugs and will in turn make the product release date more achievable.</p>
<p>Lastly, be careful to put your test files in the same folder, especially for tests other than unit testing.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to run Visual Regression Testing on a Next.js App with Cypress and Applitools ]]>
                </title>
                <description>
                    <![CDATA[ A critical component of any development project is the tests that make sure that project is always doing exactly what it’s supposed to be doing.  There are a ton of testing tools available to us, but not all of them test what someone actually experie... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-run-visual-regression-testing-on-a-next-js-app-with-cypress-and-applitools/</link>
                <guid isPermaLink="false">66b8e3646a98b2a27ee1f34c</guid>
                
                    <category>
                        <![CDATA[ Next.js ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user testing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Thu, 10 Dec 2020 16:14:28 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/12/applitools.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>A critical component of any development project is the tests that make sure that project is always doing exactly what it’s supposed to be doing. </p>
<p>There are a ton of testing tools available to us, but not all of them test what someone actually experiences. How can we use Applitools to visually test our project and make sure it’s actually working right?</p>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-visual-regression-testing">What is Visual Regression Testing?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-cypress">What is Cypress?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-applitools">What is Applitools?</a></li>
<li><a class="post-section-overview" href="#heading-what-are-we-going-to-build">What are we going to build?</a></li>
<li><a class="post-section-overview" href="#heading-step-0-creating-a-new-react-application-with-nextjs">Step 0: Creating a new React application with Next.js</a></li>
<li><a class="post-section-overview" href="#heading-step-1-installing-and-configuring-cypress-in-a-nextjs-app">Step 1: Installing and configuring Cypress in a Next.js app</a></li>
<li><a class="post-section-overview" href="#heading-step-2-creating-your-first-cypress-test-in-a-nextjs-app">Step 2: Creating your first Cypress test in a Next.js app</a></li>
<li><a class="post-section-overview" href="#heading-step-3-installing-and-configuring-applitools-eyes">Step 3: Installing and configuring Applitools Eyes</a></li>
<li><a class="post-section-overview" href="#heading-step-4-visual-regression-testing-with-applitools-eyes">Step 4: Visual regression testing with Applitools Eyes</a></li>
</ul>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/3dF4t56LHhs" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p>You can also check out <a target="_blank" href="https://www.youtube.com/watch?v=Bei0Cvu7D7I">my live stream</a> from <a target="_blank" href="https://twitch.tv/colbyfayock">my Twitch channel</a> where I walked through the entire process of setting up a new app and testing it with Cypress and Applitools.</p>
<p>And full disclosure, I recently accepted a job as a Developer Advocate with Applitools. But you can do this tutorial using its free tier, with no credit card required.</p>
<h2 id="heading-what-is-visual-regression-testing">What is Visual Regression Testing?</h2>
<p>Similar to most tests, Visual Regression Testing is a type of test that will run periodically and at various stages of a project’s lifecycle like on pull request or production deployment to make sure everything in the app is functioning properly.</p>
<p>What Visual Regression Testing does differently, though, is it directly compares visual snapshots of your project. It detects any changes in content, layout, or any other detail you’d like either by statically visiting a page or interacting with it to preview the result of that interaction.</p>
<h2 id="heading-what-is-cypress">What is Cypress?</h2>
<p><a target="_blank" href="https://www.cypress.io/">Cypress</a> is a JavaScript-based testing framework that we’ll use to run our test suite. It runs tests in the browser, allowing us to directly check the state of our project where people will actually use it.</p>
<p>The great thing about Cypress is it also provides the ability to interact with the page. For instance, if we want to test that someone using our app is able to log in, we can enter credentials and submit the login form, then check that the authentication process properly worked.</p>
<h2 id="heading-what-is-applitools">What is Applitools?</h2>
<p><a target="_blank" href="https://info.applitools.com/ucXr9">Applitools</a> is a visual testing tool and automation platform that lets us visually compare our app at different points in time, giving us the ability to check if something changed or isn’t functioning properly.</p>
<p>While Applitools has a few different features we can take advantage of, we’re going to focus on using the Eyes API, which we’ll use to capture our snapshot and send it up to the Applitools dashboard.</p>
<h2 id="heading-what-are-we-going-to-build">What are we going to build?</h2>
<p>While we can really run Cypress and Applitools on a <a target="_blank" href="https://info.applitools.com/ucXsd">variety of project types</a>, we’re going to use Next.js to quickly spin up a new <a target="_blank" href="https://reactjs.org/">React</a> application. This will allow us to focus on the testing tools rather than the app itself.</p>
<p>Once we have our app set up, we’ll install Cypress and Applitools so we can use them to run our visual regression testing.</p>
<p><em>Note: you’ll need to have an Applitools account in order to set up visual regression testing. You can <a target="_blank" href="https://info.applitools.com/ucXsg">sign up for a free account</a> at applitools.com.</em></p>
<h2 id="heading-step-0-creating-a-new-react-application-with-nextjs">Step 0: Creating a new React application with Next.js</h2>
<p>To get started, we’re going to use <a target="_blank" href="https://nextjs.org/docs/api-reference/create-next-app">Create Next App</a> to create a new Next.js app.</p>
<p>Once you’re in the directory that you want to create your new project in, inside of your terminal run:</p>
<pre><code>npx create-next-app my-testing-app
</code></pre><p><em>Note: you can change the project name from <code>my-testing-app</code> to whatever you would like.</em></p>
<p>This will clone the default Next.js example from GitHub, install the dependencies, and immediately allow us to get productive with our testing tools.</p>
<p>Once it’s finished, navigate into your new project:</p>
<pre><code>cd my-testing-app
</code></pre><p>Start your development server:</p>
<pre><code>npm run dev
</code></pre><p>And now your site should be available at <a target="_blank" href="http://localhost:3000">http://localhost:3000</a>!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/new-nextjs-app.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>New Next.js App</em></p>
<h2 id="heading-step-1-installing-and-configuring-cypress-in-a-nextjs-app">Step 1: Installing and configuring Cypress in a Next.js app</h2>
<p>Now that we have our app set up, we want to install Cypress so that we can use it to run our tests.</p>
<p>Back inside of our terminal, we can install Cypress with:</p>
<pre><code>npm install cypress --save-dev
</code></pre><p>Here, we’re including the <code>—save-dev</code> flag, as we don’t need Cypress to run in the production version of our application, so we install it as a dev dependency.</p>
<p>Once that’s complete, we need a way to run Cypress from the command line. While we can navigate to Cypress itself, we can instead add a new script command, which will make it easier to run Cypress.</p>
<p>Inside of <code>package.json</code>, under <code>scripts</code>, add the following:</p>
<pre><code class="lang-json"><span class="hljs-string">"cy:open"</span>: <span class="hljs-string">"cypress open"</span>
</code></pre>
<p>Now, inside our terminal, we can run that script to open Cypress:</p>
<pre><code>npm run cy:open
</code></pre><p>If this is the first time you’re running Cypress, it might take an extra second and install Cypress in your project.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/opening-cypress-in-terminal.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Opening Cypress for the first time</em></p>
<p>Once finished, Cypress will open a new dialogue panel that will serve as your dashboard for running tests for your project.</p>
<p>You’ll also notice that Cypress lets you know they also added a new directory to your project at <code>cypress</code>. This includes example files that let you see how Cypress works and immediately get started.</p>
<p>To try this out, on the right side of the Cypress panel, click <strong>Run 19 integration specs</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/cypress-run-all-tests.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Cypress will then open up a new browser and run through all of the example tests.</p>
<p>Next, we’ll add some of our own tests.</p>
<p><a target="_blank" href="https://github.com/colbyfayock/my-testing-app/commit/ba73974d4521443d64fa4bddbc07500c0bb7b74f">Follow along with the commit!</a></p>
<h2 id="heading-step-2-creating-your-first-cypress-test-in-a-nextjs-app">Step 2: Creating your first Cypress test in a Next.js app</h2>
<p>Now that we can successfully run our tests, let’s try adding our own.</p>
<p>We don’t need really any of the tests that Cypress included in the examples, so let’s remove the entire <code>integration/examples</code> directory.</p>
<p>Then, create a new file under <code>integration</code> called <code>home.spec.js</code> and inside add the following:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">/// &lt;reference types="cypress" /&gt;</span>

context(<span class="hljs-string">'Home'</span>, <span class="hljs-function">() =&gt;</span> {
  beforeEach(<span class="hljs-function">() =&gt;</span> {
    cy.visit(<span class="hljs-string">'http://localhost:3000'</span>);
  });

  it(<span class="hljs-string">'should find the title of the homepage'</span>, <span class="hljs-function">() =&gt;</span> {
    cy.get(<span class="hljs-string">'h1'</span>).contains(<span class="hljs-string">'Welcome'</span>);
  });
});
</code></pre>
<p>In the code above, we’re:</p>
<ul>
<li>First adding Cypress as a reference type, which allows Cypress to find the file and know that it should use it to run a test</li>
<li>Creating a new context for our test and defining it as Home</li>
<li>Telling Cypress that before each test, we want it to visit our homepage</li>
<li>Defining a test that grabs the h1 and checks that it contains “Welcome”</li>
</ul>
<p>If we now look back at Cypress, we’ll see that we only have that one Integration Test. If we click it and try to run the test, we’ll see that we actually get an error, as we never started up our development server, meaning it’s not available.</p>
<p>To fix this, we’re going to use a tool called <a target="_blank" href="https://www.npmjs.com/package/start-server-and-test">start-server-and-test</a>.</p>
<p>This package will do what the name implies, it will:</p>
<ul>
<li>Start our server based on the command we provide</li>
<li>Run the tests that we provide</li>
<li>Stop the server once complete</li>
</ul>
<p>To add it, inside of our terminal let’s run:</p>
<pre><code>npm install start-server-and-test --save-dev
</code></pre><p>Then, inside of our <code>package.json</code> file, we’re going to add another new command to the <code>scripts</code> object:</p>
<pre><code class="lang-json"><span class="hljs-string">"test"</span>: <span class="hljs-string">"start-server-and-test dev 3000 cy:open"</span>
</code></pre>
<p>Here, we’re telling start-server-and-test that we want to run the <code>dev</code> command to start our server, that it will be available at port 3000, and that we want to run the <code>cy:open</code> command after to run our tests.</p>
<p>And if we go back to our terminal and run:</p>
<pre><code>npm run test
</code></pre><p>We’ll see that Cypress opens up like before. But if we now run our test, we can see that it successfully opens up our Next.js app and it sees the word “Welcome” inside of our <code>h1</code>!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/successful-test-cypress.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Successfully running a test in Cypress</em></p>
<p><a target="_blank" href="https://github.com/colbyfayock/my-testing-app/commit/b7fdcada3c6642521baa8c34949c4b9df3e56c18">Follow along with the commit</a>.</p>
<h2 id="heading-step-3-installing-and-configuring-applitools-eyes">Step 3: Installing and configuring Applitools Eyes</h2>
<p>With Cypress successfully running our tests, we can now hook into our tests and use Applitools to run visual regression testing on our project.</p>
<p>Before we dive in, make sure you have a <a target="_blank" href="https://info.applitools.com/ucXsg">free account</a> set up over at Applitools, which we’ll need in order to set up an API key.</p>
<p>To get started, we’re going to need to install the Eyes library to our project.</p>
<p>In our terminal, we can run:</p>
<pre><code>npm install @applitools/eyes-cypress --save-dev
</code></pre><p>Which will install the <a target="_blank" href="https://www.npmjs.com/package/@applitools/eyes-cypress">Cypress-specific SDK for Applitools Eyes</a>.</p>
<p>Once that’s finished installing, we can run the Eyes setup script.</p>
<pre><code>npx eyes-setup
</code></pre><p>This will go through the project and add the necessary configurations to Cypress to make Eyes work properly.</p>
<p>Finally, we’ll need to make our Applitools API key available whenever we run our tests.</p>
<p>To start, we need to find our API key in our Applitools account.</p>
<p>Inside the Applitools dashboard, select <strong>My API Key</strong> under the account dropdown.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/applitools-finding-api-key.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Finding the Applitools API key</em></p>
<p>It will open a dialogue where you can select and copy your API key.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/applitools-api-key.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Copying the Applitools API key</em></p>
<p>You’ll want to save this API key for later when we run our tests.</p>
<p>Next, we’ll want to be able to set our API key. We can do this a few ways:</p>
<ul>
<li><a target="_blank" href="https://docs.cypress.io/guides/guides/environment-variables.html#Option-3-CYPRESS">Export the environment variable</a> in our shell before running the tests</li>
<li>Prepend the API key to the test command</li>
<li>Add the API key to the <a target="_blank" href="https://www.npmjs.com/package/@applitools/eyes-cypress#advanced-configuration">applitools.config.js</a> file</li>
<li>Create an environment variable using dotenv and the <a target="_blank" href="https://github.com/morficus/cypress-dotenv">cypres-dotenv</a> package</li>
</ul>
<p>For this demo, we’re going to run our test by prepending the API key to our command. This will allow us to quickly test this out.</p>
<p>To do this, any time we run a command like <code>npm run test</code>, we’re going to include our API key in front of it like:</p>
<pre><code>APPLITOOLS_API_KEY=<span class="hljs-string">"abcd1234"</span> npm run test
</code></pre><p><em>Note: remember to replace the API key with your unique ID.</em></p>
<p>And now, we should be ready to add our first test.</p>
<p><a target="_blank" href="https://github.com/colbyfayock/my-testing-app/commit/0b11b0238270b320969ac9982b271a48981634f4">Follow along with the commit!</a></p>
<h2 id="heading-step-4-visual-regression-testing-with-applitools-eyes">Step 4: Visual regression testing with Applitools Eyes</h2>
<p>We have Cypress and Applitools both configured and ready to go, meaning we can now add Applitools Eyes to visually test our app!</p>
<p>Our app doesn’t have a lot of functionality yet., so we can start off with a basic check that makes sure our homepage looks the way it’s supposed to each time our tests run.</p>
<p>To start, inside of our <code>cypres/integrations/home.spec.js</code> file, let’s add the following right below our existing <code>it</code> statement:</p>
<pre><code class="lang-javascript">it(<span class="hljs-string">'should verify the homepage looks as expected'</span>, <span class="hljs-function">() =&gt;</span> {
  cy.eyesOpen({
    <span class="hljs-attr">appName</span>: <span class="hljs-string">'My App'</span>,
    <span class="hljs-attr">testName</span>: <span class="hljs-string">'Homepage Check'</span>,
  });

  cy.eyesCheckWindow({
    <span class="hljs-attr">tag</span>: <span class="hljs-string">'App Window'</span>,
    <span class="hljs-attr">target</span>: <span class="hljs-string">'window'</span>,
    <span class="hljs-attr">fully</span>: <span class="hljs-literal">true</span>
  });

  cy.eyesClose();
});
</code></pre>
<p>Here’s what we’re doing here:</p>
<ul>
<li>First, we’re “opening the eyes” of Applitools, which will prepare the Eyes functionality to check our app</li>
<li>Next, we’re running a check on the window of our application, essentially capturing a screenshot of our app and sending it to Applitools</li>
<li>Finally, we “close the eyes” of Applitools, letting Eyes know that we’re running our checks</li>
</ul>
<p>Now, if we run our test command and start our test:</p>
<pre><code>APPLITOOLS_API_KEY=<span class="hljs-string">"abcd1234"</span> npm run test
</code></pre><p>We can see that Cypress runs our new test case which doesn’t appear that it’s doing anything inside of our browser, but shows a passing indicator.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/successul-applitools-check.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Successfully ran an Applitools Eyes check in Cypress</em></p>
<p>Now, if we go back to our Applitools dashboard:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/applitools-eyes-first-snapshot.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>First snapshot in Applitools</em></p>
<p>We can see that we have a new “run” titled Homepage Check (which we specified in the code) which shows that it passed with a snapshot of our app.</p>
<p>Now, having this screenshot alone isn’t what makes this powerful. From now on, any time we run this test, Applitools will compare our app against this original snapshot and let us know if anything changed.</p>
<p>To test this out, we’re going to change the color of title of our page. This might seem like a simple change, but style changes can be more challenging for tools like Cypress alone to detect an issue, which is where Applitools Eyes will shine with its snapshot comparison.</p>
<p>Inside of <code>styles/Home.module.css</code> file, let’s add the following to the <code>.title</code> class:</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">color</span>: <span class="hljs-selector-id">#ddd</span>;
</code></pre>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/nextjs-app-title-color-change.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Next.js app with light gray title</em></p>
<p>While we may not have intentionally made a change like this in practice, this could have happened if we were changing styles that cascade to our title. This makes our title hard to read, but that makes this perfect for a test case.</p>
<p>Now, let’s run our tests again:</p>
<pre><code>APPLITOOLS_API_KEY=<span class="hljs-string">"abcd1234"</span> npm run test
</code></pre><p>But this time, we can see that our test fails! </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/cypress-failed-applitools-eyes-test-error.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Cypress throwing an error with the Applitools Eyes check</em></p>
<p>Our Applitools test fails because it states that “Eyes-Cypress detected diffs or errors during execution of visual tests”.</p>
<p>If we look inside of our Applitools dashboard:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/applitools-eyes-text-change-detected.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Change detected in text of app title in Applitools Eyes</em></p>
<p>We can see that we now have an “Unresolved” run where Applitools shows us the differences on the page, which in our case, is the "Welcome to" part of our title.</p>
<p>This is super useful when working on projects where it can be challenging to test every single page or type of page in an app. We can make sure that if anything changes or breaks, it will immediately get flagged in Applitools.</p>
<p>From here, if we’re happy with color change, we can accept the new version of our app.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/12/applitools-eyes-accept-reject-changes.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Accept or reject changes in Applitools Eyes</em></p>
<p>Otherwise we can reject it and let our team know that it needs to be fixed.</p>
<p><a target="_blank" href="https://github.com/colbyfayock/my-testing-app/commit/6c5f5655d0e15878e870a893652201979244e986">Follow along with the commit!</a></p>
<h2 id="heading-whats-next">What’s next?</h2>
<p>Between Cypress and Applitools, we have a lot of things we can do to make sure that our app is behaving the way we want it to.</p>
<p>Most of the time when we’re building an app, we’re building that app so people can interact with it.</p>
<p>Using Cypress, we can click on different parts of the page, changing the state of the page, then run a check with Applitools Eyes to make sure it’s functioning the way we expect it to.</p>
<p>We can also have Cypress run on different browsers to make sure our app is working properly everywhere someone is trying to use it!</p>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">🐦 Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">📺 Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">📫 Sign Up For My Newsletter</a>
    </li>
    <li>
      <a href="https://github.com/sponsors/colbyfayock">💝 Sponsor Me</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ No budget? No excuse. Here’s a practical guide to UX on the cheap. ]]>
                </title>
                <description>
                    <![CDATA[ By Vinny Here’s a problem I’ve encountered over and over again during my 5 years as a UX designer at Melbourne agencies: no budget. “We would love to do user testing, but we can’t afford it.” It can be hard to sell user experience design. Especiall... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/no-budget-no-excuse-heres-a-practical-guide-to-ux-on-the-cheap-9605c77ef55b/</link>
                <guid isPermaLink="false">66c35bfaef766eb77cd787a0</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user experience ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UX ]]>
                    </category>
                
                    <category>
                        <![CDATA[ ux design ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sun, 05 Mar 2017 22:49:17 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*ob50UW93quohnUhYbOWjlw.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Vinny</p>
<p>Here’s a problem I’ve encountered over and over again during my 5 years as a UX designer at Melbourne agencies: <strong>no budget</strong>.</p>
<blockquote>
<p><em>“We would love to do user testing, but we can’t afford it.”</em></p>
</blockquote>
<p>It can be hard to sell user experience design. Especially when you’re working with a small or medium-sized business with a modest website budget. Every dollar is a fight, and spending 25% of the budget on “just talking to people” can be a hard sell.</p>
<p>People outside our field often seem to think talking to users is a waste of money. Well, let’s entertain that premise. Given that one of a UX designer’s core skills is empathy, let’s make an effort to see things from these outsiders’ perspective.</p>
<p>The way to view this challenge is not to ignore user testing (or whatever else it might be that you don’t have the budget for). It’s to explore ways to get around these constraints.</p>
<p>If you show value to your clients through work that had zero budget, well, you’ve just earned yourself a budget.</p>
<blockquote>
<p>“Design is easy. Getting people to give a shit about design is what’s hard.” — Tim Evans, head of UX at <a target="_blank" href="http://mylocalbroker.com.au">My Local Broker</a></p>
</blockquote>
<p>So, in this series, I’m going to share some tips and tricks I’ve learned along the way to help you get great results with little to no budget. I’ll use a popular design framework to base it on. I’ll take you through the steps required to get some great insights, while not spending very much of your website’s budget.</p>
<h3 id="heading-the-design-process">The Design Process</h3>
<p>In order to set the scene for this, there has to be a process. A method behind the madness. Personally, I prefer to shoot for the stars then strip back. Map out your ideal process, then look at what you’re really trying to achieve with each step. Get beyond the ‘what’ you are doing to the ‘why’ you are doing it — you’ll find that there’s plenty of ways to achieve the one goal.</p>
<p>There are plenty of great processes out there, but context is incredibly important. Choose a process that’s close to what you require. Then feel free to improvise upon it until it suits your project’s needs.</p>
<p>For the purposes of this article, I’m going to loosely base my process on IDEO’s circular design methodology, which you can read much more about <a target="_blank" href="https://www.circulardesignguide.com">here</a>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*-FIv6tk2qCgfizTmeM9w9A.png" alt="Image" width="762" height="696" loading="lazy">
_Circular design method — read more on the [IDEO website](https://www.circulardesignguide.com/methods" rel="noopener" target="<em>blank" title=")</em></p>
<p>It’s worth noting that while I’m referring to this design process, a key methodology I’m employing throughout is that of Lean UX. <a target="_blank" href="https://www.bookdepository.com/Lean-UX-Jeff-Gothelf/9781491953600">Jeff Gothelf and Josh Seiden’s excellent book</a> is well worth a read to get an idea of what I really mean by this, but my interpretation of Lean UX in this context is really “<em>do as little as you can to validate your ideas.”</em></p>
<p>Why? It’ll save you time and money in the long run.</p>
<p>In this first article, I’ll be looking at step one: <strong>understand</strong>.</p>
<h3 id="heading-how-to-understand"><strong>How to Understand</strong></h3>
<p>OK, you’ve got a new client. You’ve got a new website to create. Life is good. The first thing you need to do is start understanding why the client came to you. Usually this begins with a kick off meeting. My advice here is to make this as much of a one way meeting as possible. It should almost feel like you’re conducting an interview with your new client.</p>
<p>A word of warning: if it’s a small business and you’re dealing with a Director, there can be a tendency to go off track a bit. The person you’re talking to is usually used to selling their business, and you might start to get more of a sales pitch than a true insight. As with any other user interview, you’ll need to use all your skills to try and keep the interview on point and drill in to get some deeper insights to the business, which will make your long term job a whole lot easier.</p>
<p>I’d also strongly recommend recording this meeting to come back to later. Keeping minutes always helps, but a recording is much better to come back to.</p>
<p>As part of this meeting, or possibly even before, it’s also a great time to get as many details as you can from the client. Collect Google Analytics details (gold dust!), get logins for their existing CMS, try to get the FTP access, anything really related to their existing website.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*2dHUhrfkLjlVKEtWXuZiiA.png" alt="Image" width="800" height="618" loading="lazy">
<em>OK — not all that easy. Image from quickmeme.com</em></p>
<p>OK, this stuff isn’t actually that easy. There can be old agencies involved, bad relationships, among other things. Be prepared to wait for this stuff, but make sure you follow it up. Multiple times. This process is not fun, but it’s critical as it’s the difference between starting with zero and starting with something tangible.</p>
<h4 id="heading-analytics-mode">Analytics Mode</h4>
<p>OK, now your armed with some analytics data. This is a start. You can look in there, start to do your analysis — where are people going on the site, where are we losing them, how are they getting there. The picture is starting to be built in your head. While you’ll want to spend a good deal of time analyzing this data, it’s also a good idea, very early on, to improve the analytics on the site. Try to buy yourself another month’s worth of data, once you’ve got some access yourself.</p>
<p>Why is this? Well, you can get deeper. While a lot of websites will have analytics installed, they won’t all have things like event tracking or goals setup. Personally, I like to track everything as an event. Every button click on the page, should be an event. This is fairly easy to implement, especially if you are using Google Tag Manager. Which leads me to my next point…</p>
<h4 id="heading-learn-how-to-use-google-tag-manager"><strong>Learn how to use Google Tag Manager.</strong></h4>
<p>This makes your life easier. You can add multiple snippets of code in one place, and reduce your reliance on developers. Even for those of us comfortable with FTP, the less time we spend in FTP, the more time we can spend analyzing and producing insights — what we are paid to do.</p>
<p>With Google Tag Manager, you can very easily add more tracking codes to your website, for other useful tools. A favorite tool of mine to add at this stage is Hotjar. Hotjar does have a paid tier for extra insights (which is awesome if you can afford it), but it’s free version you can install on your website, through Google Tag Manager, and it’ll do a lot for no cost.</p>
<p>If you need to find out how to do something in tag manager, here are some excellent resources:</p>
<p><a target="_blank" href="https://www.simoahava.com">Simo Ahava’s blog</a> (for more advanced ideas)<br><a target="_blank" href="https://analyticsacademy.withgoogle.com/course/5">Google Tag Manager Academy</a> (getting started)</p>
<p>There are tons of great resources out there on the web, so if you are keen on it make sure and have a Google!</p>
<p><strong>Why use Hotjar?</strong></p>
<ul>
<li>You can get screen recordings of people using the website</li>
<li>You can produce heat maps of popular pages (just like Crazy Egg, but free)</li>
<li>You can install free, short surveys on the website</li>
</ul>
<p>Hotjar does more than that (funnels, for example) but those three features I find useful in every web project. It’s still analytics, and has to be taken as that (numbers alone don’t tell us everything), but it lets us get a bit deeper than the pure numbers we see in Google Analytics. We are on the path to understanding behaviours with Hotjar.</p>
<p>A particularly useful tool is the poll. If you have a a couple of nagging questions, a poll can really help out. It’s not going to uncover any really deep and meaningful insights, but may help point you in the right direction.</p>
<p>Here’s a good example question: “what’s more important to you — better content or more ways of accessing content?”</p>
<p>You can’t take the answer as gospel, but if you see 100 responses for one answer and zero for the other — you’ve got a great insight and a place to start for testing.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*PMrADUiIow9iO_8P9mACmw.png" alt="Image" width="800" height="434" loading="lazy">
<em>Hotjar Home Page</em></p>
<h4 id="heading-talking-to-real-people"><strong>Talking to Real People</strong></h4>
<p>OK. Google Analytics is a tick. You’ve got some heat maps coming through, you’ve watched people navigate through the website and you’ve started to get some responses on a poll. The next thing you need to do before you can get the tools out — is talk to real people.</p>
<p>Now this can be the hard bit. If I look at the past projects I’ve done, which step of my ideal workflow is missing the most? This step. That’s because it can be hard. But it doesn’t have to be. In an ideal world, we recruit users using some kind of outsourcing service, where they do all the work for us, the users show up at our door and we talk to them. But that costs a lot of money.</p>
<p>What we can do however is use what we have available to us. There’s a few ways of doing this.</p>
<h4 id="heading-online-user-testing"><strong><em>Online user testing</em></strong></h4>
<p>I’ve got in the habit of using <a target="_blank" href="http://peek.usertesting.com">Peek</a> (<a target="_blank" href="http://usertesting.com">usertesting.com</a>’s free sibling) for every project I work on. You get 3 free tests a month.</p>
<p>Sometimes these tests are, well, useless. It’s the wrong demographic, they don’t get the service they are looking at, and frankly it’s a waste of time. But it’s free and only takes 5 minutes of your time.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*N8FaxMUr-CgqqbLbvPr3bg.png" alt="Image" width="800" height="596" loading="lazy">
_Try out [peek.usertesting.com](http://peek.usertesting.com" rel="noopener" target="<em>blank" title=")</em></p>
<p>Most of the time I run these tests, I pull out at least one useful insight. Maybe it’s that the CTA isn’t clear — which may explain the low click through rate in analytics. Or maybe it’s a user on a Windows OS I’ve never seen the website on before, and I notice a font hasn’t loaded correctly. There’s a good chance you’ll get at least one useful insight every time you run one of these tests. They are free, I say it’s a no brainer.</p>
<p>The next option up from this is to of course use <a target="_blank" href="http://usertesting.com">usertesting.com</a>. They offer online remote user testing at $50 per test. You can specify some demographics, which should help reduce the amount of “useless” tests and the tests run quite a bit longer than the free tests. I’ve always had success with these online tests, but there’s definitely something about being in the room with somebody as they are testing.</p>
<p>This is a good cheap alternative to “real” user testing, and is particularly useful as your time is only required in the setting up of the tests, and you can then watch them at any later time that suits (like when you don’t have to be present for the testing).</p>
<h4 id="heading-guerilla-user-testing"><strong><em>Guerilla user testing</em></strong></h4>
<p>So what’s better than getting real people online at $50 a pop? How about real people, in real life at $4 a pop? Yes, it’s possible.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*zKLtrczM0iiyASoVOEWm-Q.png" alt="Image" width="800" height="610" loading="lazy">
<em>The scene of our last Guerrilla session — pro tip: pick somewhere with delicious baked goods to celebrate when you’re done!</em></p>
<p>Guerrilla user testing is not the easiest thing to do. Not everybody has the confidence to approach random people in a coffee shop (or bakery!) and ask them to sit down for 5 minutes. But you can get around this, and there’s definitely no better way of testing the site than with real people in person.</p>
<p>If you don’t fancy approaching people yourself, team up with someone who is more comfortable. What we’ve found in our experimenting with this testing is that people are generally very happy to sit down when you’re paying for their coffee. In fact, so happy that they are often very nice to you and very positive about what you are showing them — which is another problem you have to combat.</p>
<p>This kind of testing is an art, but if you want to be a good experience designer, it’s an art worth practicing and getting better at. It won’t be perfect the first time you try it (speaking from experience), but it will get better every time you do it. And even when it’s not perfect, you’ll dig out insights.</p>
<p>There’s plenty of literature to read on this topic, although I think there’s probably a lack of a great super practical guide out there. You can nevertheless do what we have done: learn by doing.</p>
<p>Start by reading <a target="_blank" href="https://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0321657292">Steve Krug’s ‘Rocket Surgery Made Easy’</a> and then reading the articles below:</p>
<ul>
<li><a target="_blank" href="http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/">The Art of Guerilla Usability Testing</a> on UX Booth</li>
<li><a target="_blank" href="https://userbrain.net/blog/7-step-guide-guerrilla-usability-testing-diy-usability-testing-method">7 Step Guide to Guerrilla Testing</a> on Userbrain</li>
</ul>
<p>I’ve been working with some of my colleagues to find a great way to collect these insights and share to our wider team, so if you are interested in learning more about this, hit me up via e-mail! :)</p>
<h3 id="heading-understanding-done"><strong>Understanding — Done</strong></h3>
<p>Once you’ve done some testing — online or “in real life” (be thankful I didn’t use the acronym) — you’re ready to start analyzing all of the data that you’ve got and defining what the problem you’re trying to solve is.</p>
<p>At this stage you should have plenty of hard data from analytics, some behavioral data from Hotjar, and you’ll have a bit of a feel for what people are thinking or feeling as they use the website or application through your user testing.</p>
<p>That means you’re ready to move onto the next stage, of sifting through, organizing all the data you have and defining the problem. That’s coming up in part 2 of this series! :)</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
