1 00:00:00,090 --> 00:00:04,340 In this lecture, we are going to write our first end to end test. 2 00:00:04,350 --> 00:00:06,990 You'll be surprised by how easy it is. 3 00:00:06,990 --> 00:00:11,040 Learning a new testing tool is like learning a new programming language. 4 00:00:11,040 --> 00:00:13,110 It's easier the second time around. 5 00:00:13,140 --> 00:00:18,120 A lot of the concepts we've learned with Jasmine are applicable to Cypress. 6 00:00:18,120 --> 00:00:21,690 The API for writing a test will be familiar to you. 7 00:00:21,720 --> 00:00:27,240 This is because most testing tools adopt similar features and syntax. 8 00:00:27,270 --> 00:00:29,610 Let's explore a test by writing one. 9 00:00:29,610 --> 00:00:33,360 The very first test we'll write will be a sanity test. 10 00:00:33,390 --> 00:00:36,600 A sanity test is a test that should always pass. 11 00:00:36,600 --> 00:00:41,670 The purpose of a sanity test is to check if the tools are correctly configured. 12 00:00:41,670 --> 00:00:46,590 If the test fails, we'll know that there's something wrong with our tools and not our tests. 13 00:00:46,590 --> 00:00:54,420 In your editor, open the spec dot c why dot test file in the cypress slash e to e directory. 14 00:00:56,440 --> 00:01:01,900 This file is an example test file the CLI plugin has generated for us. 15 00:01:01,930 --> 00:01:06,850 Immediately you will notice some similarities to Jasmine in the file. 16 00:01:06,880 --> 00:01:11,410 The described function is being called to create a test suite. 17 00:01:11,440 --> 00:01:16,820 There are two arguments the identifier and an arrow function inside it. 18 00:01:16,840 --> 00:01:20,510 The ID function is called to create a test block. 19 00:01:20,530 --> 00:01:24,070 There are two arguments the description and function. 20 00:01:24,220 --> 00:01:27,220 Other than that, everything else will be new to you. 21 00:01:27,250 --> 00:01:29,600 Let's update the tests first. 22 00:01:29,620 --> 00:01:34,030 The description will be updated to the following sanity test. 23 00:01:36,150 --> 00:01:40,550 As for the describe Block's description, we'll leave it alone. 24 00:01:40,560 --> 00:01:41,250 Next. 25 00:01:41,250 --> 00:01:44,310 Let's empty the contents of the test block. 26 00:01:46,580 --> 00:01:48,290 We're going to start fresh. 27 00:01:48,320 --> 00:01:52,020 The test will right will be similar to the original test. 28 00:01:52,040 --> 00:01:54,620 There are two things we'll do in the test. 29 00:01:54,650 --> 00:01:57,890 First, we'll visit the home page of the application. 30 00:01:57,920 --> 00:02:04,700 Secondly, we'll verify if the home page is rendering by checking if it contains some texts. 31 00:02:04,730 --> 00:02:06,940 Cypress will launch a browser. 32 00:02:06,950 --> 00:02:12,660 We can interact with the browser by using a set of global functions defined by Cypress. 33 00:02:12,680 --> 00:02:16,560 The functions can be accessed with the C y object. 34 00:02:16,580 --> 00:02:19,070 The first step was to visit the home page. 35 00:02:19,070 --> 00:02:21,230 We'll call the visit function. 36 00:02:23,470 --> 00:02:29,560 This function will tell the tool to visit a page we can pass in the URL to the function. 37 00:02:29,590 --> 00:02:35,810 The CLI plugin has configured Cyprus to allow relatively URL's to the application. 38 00:02:35,830 --> 00:02:38,550 We don't have to pass in a full URL. 39 00:02:38,560 --> 00:02:41,650 We'll pass in a forward slash character. 40 00:02:44,020 --> 00:02:48,430 Next, let's verify the home page was rendered by checking the logo. 41 00:02:48,460 --> 00:02:51,250 Open the navigation template file. 42 00:02:54,820 --> 00:02:59,370 In the template, there's an HTML comment that says apt name. 43 00:02:59,380 --> 00:03:04,480 Under this comment, we have an anchor element for navigating to the home page. 44 00:03:04,510 --> 00:03:09,320 Our test will select this element and check the inner text. 45 00:03:09,340 --> 00:03:11,330 If the inner text gets rendered. 46 00:03:11,350 --> 00:03:15,190 We can safely assume that Cypress is loading our application. 47 00:03:15,220 --> 00:03:18,010 Head back to the test file below the visit. 48 00:03:18,010 --> 00:03:22,210 Function run a function called see dot contains. 49 00:03:24,370 --> 00:03:28,510 This function will search the current document for a selection of tests. 50 00:03:28,540 --> 00:03:30,440 There are two arguments. 51 00:03:30,460 --> 00:03:33,660 The first argument is a valid CSS selector. 52 00:03:33,670 --> 00:03:37,480 Let's set the selector to the following hash header. 53 00:03:37,990 --> 00:03:39,760 Text 3xl. 54 00:03:41,890 --> 00:03:47,350 The navigation menu is wrapped with a header element assigned with an ID called header. 55 00:03:47,380 --> 00:03:50,800 There are dozens of anchor elements on the document. 56 00:03:50,830 --> 00:03:54,820 This selector will allow us to accurately select the logo. 57 00:03:54,850 --> 00:03:59,320 We can start adding the second argument, which is the text to search for. 58 00:03:59,350 --> 00:04:02,620 Let's pass and the following value clips. 59 00:04:04,770 --> 00:04:05,450 Great. 60 00:04:05,460 --> 00:04:06,660 Our test is ready. 61 00:04:06,660 --> 00:04:08,180 Let's open Cyprus. 62 00:04:08,190 --> 00:04:12,780 If you haven't already launch this program, it should always be running. 63 00:04:12,780 --> 00:04:15,540 After opening Cyprus open the browser. 64 00:04:15,540 --> 00:04:20,579 In the browser, a list of specification test files are listed on the page. 65 00:04:20,579 --> 00:04:23,040 Let's click on our test to run it. 66 00:04:25,400 --> 00:04:32,590 After a few moments, the page will load our application in a frame the test should have passed successfully. 67 00:04:32,600 --> 00:04:37,660 The result is indicated by the Checkmark Icon next to the name of the test. 68 00:04:37,670 --> 00:04:44,870 Interestingly, we can hover our mouse over each step in the test to view a screenshot generated by 69 00:04:44,870 --> 00:04:45,770 Cyprus. 70 00:04:45,770 --> 00:04:52,190 If we have our mouse over the contains function, the element selected by our query gets highlighted 71 00:04:52,220 --> 00:04:53,240 on the page. 72 00:04:53,270 --> 00:04:54,320 That's great. 73 00:04:54,350 --> 00:04:57,950 This information gives us key insight into our tests. 74 00:04:57,950 --> 00:05:00,350 There may be other logs in the test. 75 00:05:00,380 --> 00:05:06,650 Typically Cyprus will inform us of HTTP requests performed by our application. 76 00:05:06,650 --> 00:05:08,900 We're not interested in these requests. 77 00:05:08,900 --> 00:05:10,760 You can safely ignore them. 78 00:05:10,760 --> 00:05:15,590 Cyprus allows us to time travel between each point in the test. 79 00:05:15,590 --> 00:05:20,630 You can click on each step to further inspect the action during the test. 80 00:05:20,630 --> 00:05:24,200 This feature can help you better understand what's going on. 81 00:05:24,200 --> 00:05:27,770 As you can see, Cyprus is extremely powerful. 82 00:05:27,770 --> 00:05:31,610 It gives you all the information you'll need to debug a test. 83 00:05:31,610 --> 00:05:35,390 If the test took a while to finish, that's completely fine. 84 00:05:35,390 --> 00:05:41,420 Keep in mind the duration of the test is not an indicator of how long the app takes to load. 85 00:05:41,420 --> 00:05:48,380 Cyprus is performing additional tasks during the test, such as taking screenshots and logging data. 86 00:05:48,440 --> 00:05:51,830 This is one of the downsides of using E to E testing. 87 00:05:51,830 --> 00:05:53,240 They take a while to run. 88 00:05:53,240 --> 00:05:55,700 Even for a simple test like this. 89 00:05:55,850 --> 00:05:58,130 The sanity test has passed. 90 00:05:58,130 --> 00:06:01,490 We can confirm that Cyprus is properly installed. 91 00:06:01,490 --> 00:06:04,100 We can begin to test our application.