WEBVTT 1 00:00:00.600 --> 00:00:02.320 Hi guys and welcome back. 2 00:00:02.320 --> 00:00:03.650 In this video we're going to be adding 3 00:00:03.650 --> 00:00:05.760 waits to our search. 4 00:00:05.760 --> 00:00:07.580 Sometimes, when you're interacting with a page 5 00:00:07.580 --> 00:00:09.300 that uses JavaScript, 6 00:00:09.300 --> 00:00:11.410 things are not gonna happen immediately. 7 00:00:11.410 --> 00:00:13.400 For example, you may select an author 8 00:00:13.400 --> 00:00:15.430 from the dropdown and then it may take you 9 00:00:15.430 --> 00:00:17.970 a couple of seconds before the tags dropdown 10 00:00:17.970 --> 00:00:19.650 is populated. 11 00:00:19.650 --> 00:00:22.150 Although the page we're using is very fast, 12 00:00:22.150 --> 00:00:24.180 other pages may be much slower 13 00:00:24.180 --> 00:00:25.623 and you'll have to wait. 14 00:00:26.830 --> 00:00:29.280 The easiest way to wait 15 00:00:29.280 --> 00:00:31.230 is to do time.sleep 16 00:00:31.230 --> 00:00:33.670 and add like five seconds. 17 00:00:33.670 --> 00:00:35.390 You need to import time if you're gonna do this 18 00:00:35.390 --> 00:00:36.790 so let's do that at the top. 19 00:00:37.670 --> 00:00:39.130 Time comes with Python 20 00:00:39.130 --> 00:00:41.510 so you don't have to instal anything, 21 00:00:41.510 --> 00:00:43.330 and what this does in Python 22 00:00:43.330 --> 00:00:46.090 is it just stops everything 23 00:00:46.090 --> 00:00:47.690 for five seconds. 24 00:00:47.690 --> 00:00:49.730 If you run app.py now 25 00:00:49.730 --> 00:00:52.870 and you type Bob Marley and music, 26 00:00:52.870 --> 00:00:55.210 you'll see that Chrome opens, 27 00:00:55.210 --> 00:00:56.190 Bob Marley is selected, 28 00:00:56.190 --> 00:00:59.100 and then nothing happens for five seconds, 29 00:00:59.100 --> 00:01:00.923 and eventually music is selected. 30 00:01:01.890 --> 00:01:03.800 Again, you may need to wait 31 00:01:03.800 --> 00:01:06.763 if your programme is too fast for the website. 32 00:01:08.020 --> 00:01:12.120 However, sometimes time.sleep 33 00:01:12.120 --> 00:01:13.360 is not appropriate. 34 00:01:13.360 --> 00:01:15.230 In fact, most of the time time.sleep 35 00:01:15.230 --> 00:01:17.500 is not appropriate because it waits 36 00:01:17.500 --> 00:01:20.040 for five seconds even if the element 37 00:01:20.040 --> 00:01:22.003 is available after one second. 38 00:01:22.930 --> 00:01:25.920 Fortunately, Selenium comes with a way 39 00:01:25.920 --> 00:01:29.780 to wait until something happens. 40 00:01:29.780 --> 00:01:32.810 So what you can do is you can wait 41 00:01:32.810 --> 00:01:35.380 until the different options of the tag 42 00:01:35.380 --> 00:01:37.500 have become available. 43 00:01:37.500 --> 00:01:38.610 And that's what we're gonna do 44 00:01:38.610 --> 00:01:40.083 instead of time.sleep. 45 00:01:41.150 --> 00:01:43.830 What we'll do is we will 46 00:01:43.830 --> 00:01:45.550 go head and import a couple of things 47 00:01:45.550 --> 00:01:46.383 that we're gonna need. 48 00:01:46.383 --> 00:01:48.460 So, no longer need time there. 49 00:01:48.460 --> 00:01:50.140 So we're gonna need these three things: 50 00:01:50.140 --> 00:01:53.480 from selenium webdriver common by import by. 51 00:01:53.480 --> 00:01:55.540 We're gonna need selenium webdriver support 52 00:01:55.540 --> 00:01:57.680 expected conditions, and selenium webdriver 53 00:01:57.680 --> 00:02:01.820 support wait web driver wait. 54 00:02:01.820 --> 00:02:05.520 Then let's go back down to our search 55 00:02:05.520 --> 00:02:09.200 and here we're going to do a wait until. 56 00:02:09.200 --> 00:02:12.270 So we're gonna do webdriver wait 57 00:02:12.270 --> 00:02:14.510 and we're gonna pass in the browser 58 00:02:14.510 --> 00:02:16.290 and the maximum amount of time 59 00:02:16.290 --> 00:02:17.970 we want to wait. 60 00:02:17.970 --> 00:02:19.763 And then we're gonna do until. 61 00:02:21.050 --> 00:02:25.790 This is a, what's called an implicit wait, 62 00:02:25.790 --> 00:02:29.730 but it is a fairly explicit implicit wait. 63 00:02:29.730 --> 00:02:32.720 So, this type of wait is going to wait 64 00:02:32.720 --> 00:02:34.320 until something happens, 65 00:02:34.320 --> 00:02:35.950 and what's gonna happen is we're gonna say 66 00:02:35.950 --> 00:02:40.083 expected conditions.presence of element located. 67 00:02:41.190 --> 00:02:45.200 And then in here, we pass in a tuple 68 00:02:45.200 --> 00:02:46.910 of By CSS Selector 69 00:02:47.800 --> 00:02:50.433 and the Quotes Page Locators. 70 00:02:51.920 --> 00:02:54.330 Tag Dropdown Value Option. 71 00:02:54.330 --> 00:02:55.680 This doesn't exist yet, by the way, 72 00:02:55.680 --> 00:02:58.810 but let me just explain what's going on first. 73 00:02:58.810 --> 00:03:00.800 We're gonna wait up to 10 seconds 74 00:03:00.800 --> 00:03:03.580 until the element is in the page. 75 00:03:03.580 --> 00:03:04.870 It doesn't have to be visible. 76 00:03:04.870 --> 00:03:07.110 It just has to be in the page. 77 00:03:07.110 --> 00:03:08.360 And this is the element 78 00:03:08.360 --> 00:03:09.800 that we're gonna look for. 79 00:03:09.800 --> 00:03:12.540 We're gonna look for this thing 80 00:03:12.540 --> 00:03:14.240 and we're telling Selenium 81 00:03:14.240 --> 00:03:16.970 that that thing is a CSS selector. 82 00:03:16.970 --> 00:03:20.190 If this thing was an element ID, 83 00:03:20.190 --> 00:03:22.193 you could do By ID. 84 00:03:23.090 --> 00:03:24.650 If that thing was something else, 85 00:03:24.650 --> 00:03:26.640 you could do all of these, 86 00:03:26.640 --> 00:03:29.110 ID, xpath, link text, partial link test, 87 00:03:29.110 --> 00:03:31.660 name, tag name, class name, or CSS selector. 88 00:03:31.660 --> 00:03:32.940 So these are all the different options 89 00:03:32.940 --> 00:03:35.240 for searching and up till now 90 00:03:35.240 --> 00:03:37.000 we've only been using 91 00:03:37.990 --> 00:03:40.040 find element by css selector. 92 00:03:40.040 --> 00:03:43.710 So we've not had to use by class. 93 00:03:43.710 --> 00:03:46.970 But the expected conditions module here 94 00:03:46.970 --> 00:03:51.360 does need the by and the locator, 95 00:03:51.360 --> 00:03:53.190 and you have to say both of them. 96 00:03:53.190 --> 00:03:56.550 So, then we have to go and create this locator here. 97 00:03:56.550 --> 00:04:01.550 And this locator is going to be select tag. 98 00:04:01.840 --> 00:04:05.541 So it's basically an element inside this select, 99 00:04:05.541 --> 00:04:08.783 and it is an option that has a value. 100 00:04:09.910 --> 00:04:12.910 So if the options don't have a value, 101 00:04:12.910 --> 00:04:15.270 they won't match the selector. 102 00:04:15.270 --> 00:04:17.450 But if any option inside the selector 103 00:04:17.450 --> 00:04:20.720 has a value, then it will match the selector 104 00:04:20.720 --> 00:04:22.500 and we'll be able to find it. 105 00:04:22.500 --> 00:04:23.870 So, what it's saying is 106 00:04:23.870 --> 00:04:27.590 wait until that tag select 107 00:04:27.590 --> 00:04:30.060 has an option that has a value, 108 00:04:30.060 --> 00:04:31.900 and you wait up to 10 seconds. 109 00:04:31.900 --> 00:04:33.100 The reason for it is that 110 00:04:33.100 --> 00:04:36.290 if you right-click on this tag name here 111 00:04:36.290 --> 00:04:39.730 and you look at this one specifically, 112 00:04:39.730 --> 00:04:43.590 you'll see that there're multiple options in there. 113 00:04:43.590 --> 00:04:47.470 But only the actual tags have an option. 114 00:04:47.470 --> 00:04:49.600 The first option in the select 115 00:04:49.600 --> 00:04:51.280 doesn't have a value. 116 00:04:51.280 --> 00:04:53.400 It's just a bunch of dashes. 117 00:04:53.400 --> 00:04:56.673 So, when you don't have an author selected, 118 00:04:57.570 --> 00:04:59.850 then these selects here 119 00:04:59.850 --> 00:05:01.770 don't have options with values, 120 00:05:01.770 --> 00:05:03.970 it only has an option without a value. 121 00:05:03.970 --> 00:05:06.660 And as soon as you select an author, 122 00:05:06.660 --> 00:05:09.070 then you have your different values 123 00:05:09.070 --> 00:05:10.370 appearing there. 124 00:05:10.370 --> 00:05:12.010 So what we're gonna do is we're gonna wait 125 00:05:12.010 --> 00:05:15.000 for an option with a value to appear 126 00:05:15.000 --> 00:05:18.129 and that's for how long we're going to wait. 127 00:05:18.129 --> 00:05:20.390 Notice that if it's instant, 128 00:05:20.390 --> 00:05:21.660 then this is gonna be instant as well 129 00:05:21.660 --> 00:05:23.930 or almost instant and if it's not, 130 00:05:23.930 --> 00:05:26.070 then this is gonna wait up to 10 seconds. 131 00:05:26.070 --> 00:05:27.230 The way this works internally 132 00:05:27.230 --> 00:05:29.770 is it just checks every now and then 133 00:05:29.770 --> 00:05:31.243 to see if it's appeared. 134 00:05:32.730 --> 00:05:35.030 Once again, this just works the same way. 135 00:05:35.030 --> 00:05:36.750 We type Bob Marley 136 00:05:38.170 --> 00:05:39.840 and then we type music 137 00:05:39.840 --> 00:05:41.990 and you see that now it's almost instant 138 00:05:43.290 --> 00:05:45.713 because that appears very quickly. 139 00:05:46.970 --> 00:05:50.770 But if you run it and if we like 140 00:05:50.770 --> 00:05:52.523 quotes from this author, 141 00:05:53.640 --> 00:05:55.430 what you'll see is that it's gonna wait 142 00:05:55.430 --> 00:05:57.420 up to 10 seconds after launching Chrome. 143 00:05:57.420 --> 00:06:00.030 Because by selecting this author 144 00:06:00.030 --> 00:06:02.710 this hasn't changed and there are no tags 145 00:06:02.710 --> 00:06:05.100 in there, no options that have a value. 146 00:06:05.100 --> 00:06:07.687 And after 10 seconds you'll see an error appeared. 147 00:06:07.687 --> 00:06:08.617 "An unknown error appeared. 148 00:06:08.617 --> 00:06:10.290 "Please try again." 149 00:06:10.290 --> 00:06:11.730 Hopefully, all of this makes sense. 150 00:06:11.730 --> 00:06:15.590 The whole waiting is very important 151 00:06:15.590 --> 00:06:16.730 when you're using Selenium. 152 00:06:16.730 --> 00:06:18.680 You're gonna have to be waiting 153 00:06:18.680 --> 00:06:20.250 a lot of the time when you're interacting 154 00:06:20.250 --> 00:06:21.270 with JavaScript websites 155 00:06:21.270 --> 00:06:22.940 because things can take a while. 156 00:06:22.940 --> 00:06:24.700 If the website has to talk to a server 157 00:06:24.700 --> 00:06:26.210 that can take some time. 158 00:06:26.210 --> 00:06:27.770 And you just don't want to be 159 00:06:27.770 --> 00:06:29.950 faster on the website. 160 00:06:29.950 --> 00:06:32.180 And not only that, but sometimes 161 00:06:32.180 --> 00:06:35.010 you actually want to be deliberately slow 162 00:06:35.010 --> 00:06:38.380 because users can be slower as well. 163 00:06:38.380 --> 00:06:40.140 So, waiting, very important. 164 00:06:40.140 --> 00:06:41.810 I've just scratched the surface here 165 00:06:41.810 --> 00:06:42.700 in this video. 166 00:06:42.700 --> 00:06:45.140 You've got explicit and implicit waits. 167 00:06:45.140 --> 00:06:46.570 Explicit wait is when you actually 168 00:06:46.570 --> 00:06:49.210 tell Python how long to wait for. 169 00:06:49.210 --> 00:06:52.470 Implicit waits is when you wait 170 00:06:52.470 --> 00:06:54.340 until a certain amount of time 171 00:06:54.340 --> 00:06:56.510 or up to a certain amount of time. 172 00:06:56.510 --> 00:06:58.040 So, thanks for joining me in this video. 173 00:06:58.040 --> 00:06:59.160 I hope you've learned something. 174 00:06:59.160 --> 00:07:00.610 I'll see you on the next one.