End-to-end testing

End-to-end testing with NX

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Next-Level Angular Apps with NX course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Next-Level Angular Apps with NX, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Next-Level Angular Apps with NX

  • [00:00 - 00:09] Let's explore how to create end-to-end tests in Nx. So you don't need to install end-to-end framework additionally.

    [00:10 - 00:25] When you create a new monorepo with Angular app or you add a new Angular app to your monorepo, the interactive wizard will ask you about your favorite test runner for end-to- end tests. And as you can see, I'm going to choose Cypress.

    [00:26 - 00:36] Once everything is installed, you should have your application here and e-to-e project to put your end-to-end tests inside. So let's check what is inside.

    [00:37 - 00:45] And as you can see, we have our Cypress config here. And we have everything necessary to start writing our code.

    [00:46 - 00:52] So let's access SRC, e-to-e. And we have our first example app, CI/TS.

    [00:53 - 00:57] Let's create a new file. And again, I will try to test our NxWelcome component.

    [00:58 - 01:07] So let's create a new file, NxWelcome.cy.ts. Inside of this file, we will create a describe function here.

    [01:08 - 01:18] And then we need to set the title of this test. So NxWelcome.

    [01:19 - 01:31] And the first case, let's check if it works. So it should load.

    [01:32 - 01:36] I will put the rest of the code and then we will go through it. As you can see, the code is very simple.

    [01:37 - 01:50] First of all, we need to call visit to go to our web page that is hosted under localhost 4200. Then Cypress get app and xWelcome, which is basically the selector of our welcome component.

    [01:51 - 01:58] And then we have some assertions like it exists, should be visible, should contain some text. Let's run it.

    [01:59 - 02:06] Running N10 tests in Nx is very simple. You need to execute comment yarn, Nx, e-to-e.

    [02:07 - 02:15] And then the name of the project that contains N to end tests. So my application is called angular e-to-e monorepo.

    [02:16 - 02:25] And I need to add this e-to-e and just to point the project that contains my tests. And basically as it.

    [02:26 - 02:32] And as you can see, it's starting. My tests have failed for some reason.

    [02:33 - 02:38] But as you can see, running N2N tests is very simple. You don't need to install it separately.

    [02:39 - 02:44] It's generated for your by default. So you can have a modern technology stack.

    [02:45 - 02:54] You can have storybook, you can have Cypress or playwright or whatever you want . Just by executing two or three comments.

    [02:55 - 03:05] You don't need to spend your time figuring out what is not working, why it's not working. And you can focus on important parts that are features, business needs and the code.