Testing Next.js Applications with Cypress-03.png

project.tar.gz

Migrate, build and start

Build and start

Build and test

Migrate, build and test

Migrate, build and test components

Gain real-world knowledge for making Next.js websites more reliable through smart testing. You will start this course by understanding the basics of Next.js and how files are organized, and data is fetched. Then, you will explore Cypress, a tool that helps you test your website to ensure everything works as expected.

In this course, you will learn the ins and outs of Cypress by selecting elements and making assertions. Next, you will learn how to test a real-world Next.js application and get hands-on experience writing end-to-end and component tests from scratch.

By the end of this course, you will have the required skills to set up a comprehensible Cypress test suit that can test any web application. Whether you are a seasoned Next.js developer or just getting started, this course empowers you to elevate your testing game, contributing to the overall quality and reliability of your Next.js applications.

Testing Next.js Applications with Cypress

Which option selects the following element?
```html
<h1>Hello World</h1>
```

<p>Which option selects the following element?</p>
<pre><code class="language-html">&lt;h1&gt;Hello World&lt;/h1&gt;
</code></pre>


```js
cy.get("h1.title").contains("main-title")
```

```js
cy.get("#main-title").should("have.class", "title")
```

```js
cy.get("h1").should("contain", "Hello World")
```

```js
cy.get(".title").contains("Hello World")
```

**(Select all that apply.)** Which tests correctly pass when tested on the following markup?

```html
<h1 class="title" id="main-title">Hello World</h1>
```

<p><strong>(Select all that apply.)</strong> Which tests correctly pass when tested on the following markup?</p>
<pre><code class="language-html">&lt;h1 class=&quot;title&quot; id=&quot;main-title&quot;&gt;Hello World&lt;/h1&gt;
</code></pre>


Cypress automatically waits until a selector or an assertion becomes true.

When selecting an element, Cypress automatically asserts that it exists.

Cypress only supports the Chrome browser.

**(Select all that apply.)** Which statements are *true*?

<p><strong>(Select all that apply.)</strong> Which statements are <em>true</em>?</p>


End-to-end tests are the slower than unit tests to run.

End-to-end tests test the whole application.

User journeys can be easily translated into end-to-end tests.

Selecting elements by their text content best matches how real users are using our application.

**(Select all that apply.)** What types of tests can you do with Cypress?

<p><strong>(Select all that apply.)</strong> What types of tests can you do with Cypress?</p>


Test your knowledge of selecting elements and making assertions with Cypress.

Introduction to Next.js and Testing

Introduction to Cypress

Testing a Next.js Application

End-To-End Testing with Cypress

Component Testing with Cypress

Assessment: Testing Next.js Applications with Cypress

Conclusion

Quiz: Cypress