%% Related: - %% # Real browser testing with xk6-browser ## The video <iframe width="560" height="315" src="https://www.youtube.com/embed/y04wavsZxSs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Timestamps ## Transcript 1 00:00:00,160 --> 00:00:05,000 - Without a doubt, my favorite k6 extension is xk6-browser. 2 00:00:05,000 --> 00:00:09,700 xk6-browser finally brings browser test automation to k6. 3 00:00:09,700 --> 00:00:12,290 So you don't need to learn a new tool 4 00:00:12,290 --> 00:00:14,330 or figure out how to integrate it 5 00:00:14,330 --> 00:00:16,210 if you already have load tests. 6 00:00:16,210 --> 00:00:19,440 You can create JavaScript-based, 7 00:00:19,440 --> 00:00:22,780 browser-driven tests with k6. 8 00:00:22,780 --> 00:00:24,050 Here's how. 9 00:00:24,050 --> 00:00:26,580 Since xk6-browser is an extension, 10 00:00:26,580 --> 00:00:29,430 we're gonna need to build a custom version of k6 11 00:00:29,430 --> 00:00:31,150 that includes that extension. 12 00:00:31,150 --> 00:00:34,820 And the thing that builds that is called xk6. 13 00:00:34,820 --> 00:00:37,610 What I'm doing here is I'm instructing xk6 14 00:00:37,610 --> 00:00:42,360 to create a build using version 0.35 of k6, 15 00:00:42,360 --> 00:00:44,620 that includes xk6-browser. 16 00:00:44,620 --> 00:00:47,030 And this is a link to the repository 17 00:00:47,030 --> 00:00:50,460 where xk6-browser is stored. 18 00:00:50,460 --> 00:00:52,210 So now that we have a version of k6 19 00:00:52,210 --> 00:00:54,410 that includes xk6-browser, 20 00:00:54,410 --> 00:00:57,450 the next step is to create the browser script. 21 00:00:57,450 --> 00:00:59,490 Now you can do that in the one script, 22 00:00:59,490 --> 00:01:01,190 but just for ease of debugging 23 00:01:01,190 --> 00:01:03,630 I'm gonna put it in another script for now. 24 00:01:03,630 --> 00:01:07,850 We're not going to be using the HTTP requests anymore 25 00:01:07,850 --> 00:01:11,450 so I'm going to import launcher 26 00:01:11,450 --> 00:01:15,573 from k6/x/browser. 27 00:01:17,800 --> 00:01:20,880 And I'll save that as browser. 28 00:01:20,880 --> 00:01:23,720 I'm definitely going to be using sleep, 29 00:01:23,720 --> 00:01:27,290 so let me go ahead and import that now as well. 30 00:01:27,290 --> 00:01:30,860 We'll also need a default function for this. 31 00:01:30,860 --> 00:01:35,090 We're setting up an instance of the launcher 32 00:01:35,090 --> 00:01:37,883 that's going to launch Chromium in particular, 33 00:01:41,080 --> 00:01:43,900 and we do want to see it so 34 00:01:43,900 --> 00:01:45,760 I'm going to say headless: false. 35 00:01:45,760 --> 00:01:47,400 If you set this to true, 36 00:01:47,400 --> 00:01:49,790 that means that you won't actually see 37 00:01:49,790 --> 00:01:53,610 the web browser being driven by the script, 38 00:01:53,610 --> 00:01:56,620 which is handy to see during demos. 39 00:01:56,620 --> 00:01:58,620 So we'll do that, 40 00:01:58,620 --> 00:02:01,103 and then we have to set up the context. 41 00:02:02,350 --> 00:02:06,753 So browser, oops, new context. 42 00:02:09,400 --> 00:02:11,430 And then we set up a page. 43 00:02:11,430 --> 00:02:13,683 The first one is go to the homepage. 44 00:02:16,210 --> 00:02:18,913 The second one is to view a product. 45 00:02:22,120 --> 00:02:24,950 Third, add the product to the cart. 46 00:02:24,950 --> 00:02:27,600 Fourth is go to the cart 47 00:02:27,600 --> 00:02:30,693 and then last, I want to check out. 48 00:02:31,760 --> 00:02:33,000 So to do that, 49 00:02:33,000 --> 00:02:36,440 I've already defined the browser context in page. 50 00:02:36,440 --> 00:02:39,037 Now I need to do page.goto 51 00:02:41,206 --> 00:02:46,140 http://ecommerce.k6.io 52 00:02:48,460 --> 00:02:52,500 and I will also want to wait for 53 00:02:52,500 --> 00:02:54,633 waitUntil: networkidle. 54 00:02:56,320 --> 00:02:57,153 Great. 55 00:03:00,490 --> 00:03:02,740 I wanted to add some sort of check 56 00:03:02,740 --> 00:03:06,313 to make sure that I've actually gotten to a place so, 57 00:03:07,220 --> 00:03:10,170 let's open up DevTools here 58 00:03:10,170 --> 00:03:13,900 and I wanna make sure that some results are displayed. 59 00:03:13,900 --> 00:03:15,710 I don't necessarily need, 60 00:03:15,710 --> 00:03:19,150 you know 1-12 of 17 but, I want this one. 61 00:03:19,150 --> 00:03:23,863 Okay, so I'll also say page.waitForSelector 62 00:03:28,120 --> 00:03:30,103 and that'll be this. 63 00:03:31,290 --> 00:03:33,323 And then let's do a screenshot, 64 00:03:34,210 --> 00:03:35,670 because we just for, 65 00:03:35,670 --> 00:03:37,770 just in case we wanna debug later 66 00:03:37,770 --> 00:03:40,490 we wanna make sure that we will be able to 67 00:03:40,490 --> 00:03:41,780 have a look at at this screenshot 68 00:03:41,780 --> 00:03:44,120 to see what exactly went wrong. 69 00:03:44,120 --> 00:03:47,270 And I'll put that in screenshots 70 00:03:47,270 --> 00:03:49,653 and I'll say 01_homepage. 71 00:03:53,160 --> 00:03:54,950 Then let's do a sleep. 72 00:03:54,950 --> 00:03:58,190 And I always like to do the random one. 73 00:03:58,190 --> 00:03:59,023 Random, 74 00:04:00,820 --> 00:04:04,323 and let's say it from zero to four. 75 00:04:05,200 --> 00:04:08,350 This time I'm doing the custom k6 version 76 00:04:08,350 --> 00:04:09,923 browser.js. 77 00:04:11,700 --> 00:04:13,520 For browser based tests 78 00:04:13,520 --> 00:04:17,140 I find it much more useful to actually see what's going on 79 00:04:17,140 --> 00:04:20,470 rather than to look at the output. 80 00:04:20,470 --> 00:04:24,170 Because as you can see there are all sorts of errors here 81 00:04:24,170 --> 00:04:27,720 and I believe that they're actually application errors 82 00:04:27,720 --> 00:04:30,320 so they can be a little bit misleading. 83 00:04:30,320 --> 00:04:31,470 It looks like that happened 84 00:04:31,470 --> 00:04:34,810 but let's just look at the screenshots. 85 00:04:34,810 --> 00:04:36,980 Screenshot, yeah. 86 00:04:36,980 --> 00:04:39,520 That, that loaded fine. 87 00:04:39,520 --> 00:04:41,600 So we can continue. 88 00:04:41,600 --> 00:04:44,380 Next step is to view a product. 89 00:04:44,380 --> 00:04:46,510 Okay, let's go back here. 90 00:04:46,510 --> 00:04:49,340 This time I want to click this thing. 91 00:04:49,340 --> 00:04:52,430 It doesn't really matter which, which item it is. 92 00:04:52,430 --> 00:04:54,823 I'll just choose the first one. 93 00:04:56,220 --> 00:04:59,140 Looks like this is the actual product link. 94 00:04:59,140 --> 00:05:03,903 So let element = page. 95 00:05:06,560 --> 00:05:09,020 And this is where we actually paste the selector 96 00:05:09,020 --> 00:05:11,950 which is what I got from DevTools. 97 00:05:11,950 --> 00:05:14,530 And then we haven't done anything yet with it. 98 00:05:14,530 --> 00:05:16,510 We want to actually click it. 99 00:05:16,510 --> 00:05:18,583 So element.click. 100 00:05:19,430 --> 00:05:23,130 After that though, I'm going to want to make sure 101 00:05:23,130 --> 00:05:25,350 that we get to the right page. 102 00:05:25,350 --> 00:05:28,500 So, let's see what happens when we click it. 103 00:05:28,500 --> 00:05:30,200 What can we look for? 104 00:05:30,200 --> 00:05:32,370 I guess we can look for this add to cart button, 105 00:05:32,370 --> 00:05:34,620 cuz if the item didn't show up then 106 00:05:34,620 --> 00:05:36,770 we wouldn't be able to add it to the cart. 107 00:05:36,770 --> 00:05:39,210 So let's grab that. 108 00:05:39,210 --> 00:05:42,623 Button, button name is add to cart. 109 00:05:43,870 --> 00:05:44,940 Copy that. 110 00:05:44,940 --> 00:05:48,227 So then I'll say page.waitForSelector, 111 00:05:49,670 --> 00:05:53,073 the selector with a button name there. 112 00:05:55,330 --> 00:05:58,113 Take another screenshot because why not? 113 00:06:00,240 --> 00:06:03,430 I'll say 02_view-product 114 00:06:04,590 --> 00:06:05,773 and then another sleep. 115 00:06:07,550 --> 00:06:09,420 From here it was pretty much more of the same. 116 00:06:09,420 --> 00:06:12,430 Here's me scripting adding the product to the cart, 117 00:06:12,430 --> 00:06:13,920 viewing the cart 118 00:06:13,920 --> 00:06:16,920 and then finally going to the checkout page. 119 00:06:16,920 --> 00:06:19,973 And here's what happened when I played it all back. 120 00:06:21,210 --> 00:06:23,520 Here it is going to the homepage, 121 00:06:23,520 --> 00:06:26,820 and then clicking on the first product, 122 00:06:26,820 --> 00:06:29,840 and then adding that product to the cart, 123 00:06:29,840 --> 00:06:31,713 and then clicking view cart, 124 00:06:35,570 --> 00:06:37,890 and then proceeding to checkout. 125 00:06:37,890 --> 00:06:39,000 The best part about this 126 00:06:39,000 --> 00:06:40,690 is that you don't have to choose between 127 00:06:40,690 --> 00:06:43,150 the browser test and the protocol test. 128 00:06:43,150 --> 00:06:46,920 They're both in k6 and written in JavaScript 129 00:06:46,920 --> 00:06:49,560 so you could include them in the same script. 130 00:06:49,560 --> 00:06:52,410 You can use stages to schedule 131 00:06:52,410 --> 00:06:54,810 when one starts and when one ends. 132 00:06:54,810 --> 00:06:56,320 You can change the load profile, 133 00:06:56,320 --> 00:06:58,150 add checks and thresholds. 134 00:06:58,150 --> 00:07:01,310 And you can also use all of the output options 135 00:07:01,310 --> 00:07:04,310 that are available for protocol tests 136 00:07:04,310 --> 00:07:06,660 for the browser tests as well. 137 00:07:06,660 --> 00:07:09,950 The catch is that xk6-browser is really new. 138 00:07:09,950 --> 00:07:11,300 We've just announced it. 139 00:07:11,300 --> 00:07:12,440 It's still in beta 140 00:07:12,440 --> 00:07:17,440 so you are likely to come across more than a few bugs. 141 00:07:17,510 --> 00:07:19,910 However, I'd still recommend that you give it a go. 142 00:07:19,910 --> 00:07:21,330 I've been playing around with it 143 00:07:21,330 --> 00:07:23,810 and I've found it more than serviceable for 144 00:07:23,810 --> 00:07:25,520 a lot of my use cases. 145 00:07:25,520 --> 00:07:27,340 Plus it's just really cool 146 00:07:27,340 --> 00:07:30,540 to be able to test front-end performance 147 00:07:30,540 --> 00:07:34,490 along with back-end performance in the same testing script. 148 00:07:34,490 --> 00:07:35,590 Thanks for watching. 149 00:07:35,590 --> 00:07:39,430 I will put a link to the xk6-browser repository below 150 00:07:39,430 --> 00:07:40,953 and happy testing.