Selenium Webdriver User Interactions | Nikolay Advolodkin | Skillshare

Selenium Webdriver User Interactions

Nikolay Advolodkin

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (1h 7m)
    • 1. 01 Introdution

      2:09
    • 2. 02 What are user interactions in Selenium Webdriver

      2:11
    • 3. 03 What are the different kind of user interactions

      2:26
    • 4. 04 How to create an Actions class in Webdriver

      3:20
    • 5. 05 Analyzing our application under test

      3:42
    • 6. 06 Writing the drag and drop test

      4:40
    • 7. 07 Finishing the first drag and drop test

      3:15
    • 8. 08 Executing the first drag and drop test

      3:32
    • 9. 09 Starting to write the 2nd drag and drop example

      3:47
    • 10. 10 Writing a 2nd drag and drop example

      2:57
    • 11. 11 Running a 2nd drag and drop example

      2:03
    • 12. 12 Drag and drop quiz question

      1:06
    • 13. 13 Drag and drop quiz answer

      3:38
    • 14. 14 How to do a resize action with selenium webdriver

      4:35
    • 15. 15 How to open developer tools with selenium webdriver

      5:27
    • 16. 16 Running a test that opens a network tab in firefox

      1:59
    • 17. 17 Drag and drop with html 5 quiz question

      0:57
    • 18. 18 Drag and drop with html 5 answer part 1

      4:31
    • 19. 19 Drag and drop with html 5 answer part 2

      2:47
    • 20. 20 How to draw on a canvas with selenium quiz

      0:32
    • 21. 21 How to draw on a canvas with selenium quiz answer

      4:06
    • 22. 22 Conclusions for course

      3:37

About This Class

Who is this course for?

Are you working on automating mobile or tablet testing? Do you have an application developed in Angular JS that has a lot of complicated user interactions? Do you need to perform actions like drag n drop, resizing, and drawing? Do you know how to open the developer toolbar so that you can monitor network traffic of your application? If so, then this is the perfect course for you.

Even if you are not working with these actions yet, you will need to know them in the future as mobile and other complicated frameworks grow.

"The best tutorials I have ever seen, simply awesome. I take off my hat in front of you, you are an gorgeous professor, I am speechless to express how satisfied I am with these tutorials." -Lisbey

What will you learn?

- Drag and drop with Selenium Webdriver

- Open developer tools to monitor traffic during your automated tests

- Resizing objects using Selenium Webdriver

- How to draw on a canvas using Webdriver

- How to perform a click and hold

- How to perform a double click

- How to work with HTML 5 for drag and drops

- How to pass different keys to the application

- So much more...

What my students are saying:

"As an Automation Engineer in the process of switching from Java to C#, I found this course interesting. By starting off with the basics of developing in C# and then progressing through unit testing and developing an automation framework, this course delivers everything you need to build a foundation to become an automation engineer. As if the development knowledge wasn't enough, the students are provided with a section about Scrum and a wealth of references about the business value of automation. I have already recommended this course to my proteges as a way to reduce their learning curve and improve productivity." -Shawn

"Great Video I have ever seen on YouTube. You are so so clear and honest in presenting the material. I had no idea how important it is to use QTP from different angle, that is via scripting. Great Work and Thank You so so so much!" -Mohammed

Crafted to perfection

Every course of mine is crafted with extreme dedication. See how this course compares to other Selenium courses

- Udemy

Udemy_student_satisfaction.png

"This is an excellent course for beginners as well as seasoned automation experts switching to C# in my opinion." -Student

Bonus:

1. Certificates of completion

2. Certification as "Selenium Webdriver User Interactions Specialist" on your LinkedIn profile upon successful course completion

If you are not 100% satisfied with the course, contact me within 30 days and I will refund all of your money without a question!

Transcripts

1. 01 Introdution: everybody. Welcome to the user interactions. Course with selenium. Web driver. My name is Nikolai, and I'm gonna be your instructor for the course. Thanks so much for being here. There's gonna be an amazing course where you guys are gonna learn everything about user interactions. We're going to start off by learning about why user interactions are so important, mainly because we want to use them to interact with things like mobile applications doing things like Dragon Drop may be doing things on a tablet. That's why use their interactions are awesome. So once we learn how to do the user interactions, we're gonna create an actions. Class is gonna help us to do all of those actions, like dragging and dropping click and holding double clicking, sending keys. We're even gonna learn how to use Dragon drop in html five, which has an advanced technique that you guys really need to know. Towards the end of the course, we're gonna learn how to open up the developer toolbar, which has been one of the most important things that I've learned throughout my career because it's going to allow us to track the network tap and the network type is going to reveal many problems in our application that exist as a webpage, actually loads. So once we do that, the court's gonna be finished, and throughout the entire course, we're gonna have a bunch off quizzes. Every section is gonna have a quiz because I do know you guys a little quizzes. And then towards the end of the course, there's gonna be a final exam that's really going to test all of your knowledge. Once you finish the course and finish the final exam, you're going to receive some treats in that you're gonna get a completion certificate for the course. And you're gonna get a certification to be able to put on your lengthy in profile stating that you're certified in user interactions for selenium Web driver, which is really amazing because now you can show off all of your skills to your employer's on your lengthen resume. So that's really about it. Let's go ahead and dive into the content. I'm really excited to teach you guys everything that I have to show you 2. 02 What are user interactions in Selenium Webdriver: So what? Argues their interactions and why are they important? Well, in selenium Web driver, you may not always be able to do everything that you need to do with the Web driver, right? For example, dragging and dropping, moving an element to a certain co ordinate location, opening up your developer tools. How are you going to do that? And so these user interactions they're meant to mimic the actual interactions over user with a webpage kind of makes sense, right? For example, if we have this drag a ble element, how are you going to take it and drag it over here to this other element? Well, using my mouth's, I am able to select it and drop it here. You can also do things like Dragon to a starting quarter and its location right. Whether I want that here or there or there doesn't matter, I'm using my mouth to do these interactions, doing things like double clicking. If I wanted to open my developer tools just have 12. It pulls up my developer tools, and so these are user interactions, and that's why they're very useful, because sometimes you may want to do stuff to the webpage that does not involve exactly the driver. Now I do have a word of caution in that flakiness with user interactions is very common. You should Onley use them as a last resort. Now think about it. If you're doing user interactions such as double clicking or opening up developer tools with your browser, it may be different. Going from browser to browse, right, I opened developer tools Will left 12 on Fire fox. But maybe on Mac Safari of 12 doesn't open developer tools. If I wanted to navigate through the network tab in chrome developer tools, maybe is completely different the navigating to a developer tab or to a network tabs in Firefox. So those are the differences that can arise between not only different browsers but also maybe even different resolutions. So you have to be very careful. They can be very flaky, and you need to use them as a last resort. But I am going to teach you guys regardless, just so that you have the knowledge because they're absolutely necessary and you're going to need them. Just use them sparingly 3. 03 What are the different kind of user interactions: So let's do a little bit off theory before we dive into the actual coating. So there are two types of user interactions. If you think about it, right, me interacting with a Web page. I can interact with the Web elements right and do the standard sending keys clicking. But I can also use my mouse and my keyboard to interact with the Web page, right? So selenium Web driver did a very awesome thing and that they broke down user interactions into two types mouse interactions and keyboard interactions. Very simple, right? So the way it works is you create a new actions object passing in your Web driver, and then you can access different kinds of actions are using the standard dot notation Some of the mouse interactions that we have our click, click and hold context. Click DoubleClick, Dragon Job to offset, Move by Offset move to element and release. So these definitions are pretty straightforward, right? It's exactly like it sounds, but also you guys will be able to see those definitions in the actual i. D. E. When we pull up our visual studio, the next type of interactions. As I mentioned our keyboard interactions, and there are only a few interactions of those. And those are key down, key up and San keys, right? Mostly used for pressing keys down, letting keys go and then sending go skis. Right. So combinations like control of the leaf control shift tab. Whatever you want to do, you keep pressing those keys down, creating a combination and then passing those keys along. So now the question is, how do you pass those keys along? Well, you can perform these actions. You can combine a bunch of keys like control old Taib Guettel Those keys together, and you can use the build method to build them together. And afterward, If you want to perform the action, you just do a perform. However, if you don't want to save your actions for the future, you can just do a perform. But if you wanna build up your actions and then save him in the object, you just build them up. And then in the future you can do a perform just like that. So now that you do have a little bit of on understanding about what's going on, let's go ahead and look at the actual code. Get into a bunch of examples and a bunch of quizzes for you guys to further cement this knowledge 4. 04 How to create an Actions class in Webdriver: fantastic. So let's go ahead and do a little bit of coding and further understand the actions, classes, the user interactions. So I'm gonna go ahead and create a new solution here. All right, so we got our user interactions tutorial. I'm not going to use visual studio test. I'm going to use and unit, so I'm going to come over here, go to references, managed to get packages in stole and unit install that fantastic successfully finished. And also I have the and unit extension installed, which is here extensions and updates and unit three tests adapter. You need this to be able to run your and unit test from visual studio so you don't need that. And unit console, which is so annoying to use. Remove both of this class. Just rename that to interactions. Demo. Make sure that it updates here. Awesome. Now, using n unit tags, this is a test fixture. It's going to complain. I'm going to control dot and resolve that it added. And unit that framework tag. My method is a test. Excellent. And let's call this example one. Okay, So the very first thing that we need to do is create a driver. So it's complains about the driver, the chief. We have a solution to it. We don't and I'm actually just using visual studio help here as opposed to using ah re sharper, which I'm sure a lot of you guys don't have just to show you that. But with re sharper, I'd be able to automatically download this from you get Package Manager. But because I don't have any sharper visual, studio doesn't tell me that I can look into the sharper, so I have to go on manually. Do that, then loose time again. I'm a big fan of re Sharper. It does make life much easier. My license, actually, recently it's expired, and I noticed how right away I'm much less efficient. I have to do so many things manually now that I didn't have to do before. It's actually kind of annoying. It is slowing me down for sure, But anyways, so we're going to download selenium support, and that's automatically going to download selenium Web driver. One click of a button installs two different things. Fantastic. So I got that. So now if I controlled dot over here should say, allow me to select using selenium Web driver. Fantastic. So now that we have a driver, the very next thing to do is to create an actions. Class is going to be a new actions, and that's going to complain. But right now I'm just gonna pass in a driver because I know that's what I need. And so it's complaining. So here, you guys can see I'm going to do that using open que way. Selenium that interactions. So now it's not complaining about the actions class, so we got the actions created. But before we do anything with this, let me show you one sample application that we're gonna work out. 5. 05 Analyzing our application under test: So here's one website that I want to show you guys. Jake, were you? I'd that com slash drop a ble. And remember, all of this is gonna be in your course notes so you can access all these links. They'll be available for you if you don't want to remember them or even write them down. But there will be there for you. And this is just a simple Jake weary. You? Why, that allows an object to take an object and drop it. So let me actually refresh this because I was showing it in the examples. If you take this object and drag it here, this drop here changes to drop. And I'll show you guys that using the HTML right now. So if we have 12 this and open up our source code and I hover here, you guys can see him that they have ideas, drop herbal, and then it's text is drop here. Okay, so when we drag us over there, it says drop. Now you guys see that now this is dropped. So this is our very first test that we're going to write. And the reason that I like this is because it's dragging elements around. It's actually very common scenario in the world where you want to be doing, dragging and dropping out right. All of our applications are getting much more complicated, and dragging dropping is very common. Whether you want to use that for your Web application, whether you want to use it for your mobile applications or even your tablet applications, these actions are becoming very common. So therefore, it's very important for you to know this stuff, and that's why you guys will see we're actually going to go through a lot of dragging and dropping examples because they can be done in many different ways. And along the way, you guys will learn all of these actions. So anyways, now that you know what we need to do, let's go ahead and investigate our actions class and slowly build it out. So the very first thing I'm gonna do is actually pull up fire Fox because I love the firebug that they got there. So that's here. Open that up on firebug. Come here and let me analyse this HTML. So first thing I want to get is this object where I'm going to drop two and we conceit ideas, Drop a ball. So certainly going to record that. I like to have my note pad handy just to write things down with that i d here The dragon belie d and Dan when we drag this to their the tax changes, right? So that's gonna be our validation point to make sure that the element was actually dropped . And this is the i. D. The text is going to change the drop. And then one other thing that I noticed right away is that if I look over here in my HTML, I see I frame you guys see that? So this is my inner object and then slowly were like zooming out and boom, There is an eye frame right there that surrounds this. And so therefore, we need to interact with an eye frame first. So I'm gonna click on this I frame and it's going to take me up here and we can see that it's class is demo frame, so I'm actually going to go like that. Awesome. So took a little bit of notes just for us to have this here, and we are going to convert this into code 6. 06 Writing the drag and drop test: Okay, Fantastic. So keep that in the back of your head. For now, I want to take a little bit of a look at the actions class. Just so you understand everything that we are about to do. So if I have 12 into the actions class, which takes me to the definition, you guys can see that it belongs to the name space open que way. That selenium that interactions. And it's a class called actions that takes a I Web driver. There are a bunch of methods here that we talked about, such as the build method which you guys are going to get familiar with and the build method . If you want to see its definition, it builds a sequence of actions. There are many other different types of methods. Click, click and hold a context click that takes a Web element, which is going to right. Click on a Web element that you pass in DoubleClick's Dragon Jobs, Key Downs and Cheops Move by offset moving to an element, releasing an alum and sending keys and add actions so you guys can see there are a ton of methods that are available with many different implementations and I just wanted to show all of these to you guys so that you know it's available. If you ever come across a situation that you need to, for example, move to an element or send key soon element or a dragon droppin l A manned or double click an element, you know it's here and available for you to go ahead and make use of it. Now that you know, all of that is available, The question is, how do we actually make it happen? So let's start riding our test. We have our driver. We have our actions now who We just need to get to our Web page so that we can work with it . So going to do driver dot navigate, go to u R l and was that you are l. That's here. By the way, guys, Quick story. Recently, I've been interviewing a lot of Hue engineers for our automation testing position, and one of the interview exams that we give is a hands on exam where we ask people to go to google dot com and we leave this part out blank, and then they need to insert a string in here and you would be so surprised How many people actually fail this portion over the interview, which is to me is crazy, but just by you guys knowing this part, you already know like 1/3 of the interview that we do is just kind of fun. And I just wanted to mention that quickly anyways, So now that we navigated to the page, the next thing to do is going to be what is gonna be switching to the frame, right? Because we can't interact with the Web elements until we switched to the frame. So to do that, we're actually gonna need a Web driver weight class. So I'm gonna put that in here. So again, this is going to complain. Let me pull out open Qiwei. That's leading to support that you why? And now this is going to take a driver and is going to take a time span from seconds, Let's say, or timeouts is going to be six seconds. Great. Oh, yeah, of course, it's complaining because it needs time span. So using system. So now we have our weight class, and with weight class, we are praying to be available on switch to it. We're gonna wait to the frame, and then we need to identify our frame and by of course, is missing. So let me import that as well controlled dot Using open Carry that selenium. Now buy dot and let me pull out my note pad again. It was by class, name, class, name. And what was that Class name? Demo frame. So now you see why I saved all those properties and the note that right. So right here we are waiting until our frame is visible and then we're going to switch to it. If you're not familiar with the expected conditions or the Web driver weight or synchronization with selenium Web driver in general, you definitely to watch. My synchronization is tutorial, which goes in depth about having proper synchronization. I'm not going to cover that here. Here. Recovering user interactions 7. 07 Finishing the first drag and drop test: so thinking logically, what is going to be our next step now that we are actually at the frame, what is it that we should do? Well, we obviously need to interact with the elements, right? So the question, I guess, is how do you start interacting with those elements? And to do that, I think you need to understand the actions class and how there was a dragon job method. So it's simple. Is that dragon drop? And then we're gonna open parentheses, and you guys can see that it takes a source and a target, so we need to set those up, right? So I'm gonna call the source element target element. And so then we want to Do you want with this? We want to perform a right this action like that. But of course, the compilers complaining because we don't have these elements existing here. So I'm going to do control dot and I'm going to create a local target element, and I'm going to create a local source elements perfect. Right there. So nice. Right? So how do we get these elements? Well, you guys should know this portion where we just do a simple driver that find element by. And I think we had ideas, which is always awesome. And let me pull up. Note that drag a ble, We're going to take the drag A bowl. This is the target. Okay, so let me copy this over. This is the source is the Dragonball were dragging the drag a ble to the drop A ball makes sense, right? They even named their ideas very well. It's always awesome to have ideas to work with them. So our target is the drop a ble to the Dragonball. Let's just double check that to make sure. If you don't believe me, we're dropping here onto the drop a ball target. Awesome. Right. So now we're doing a dragon job. We're taking our source and we're dragging it on to our target, and then we're performing. And then the only other thing to do is to make sure that this is actually been dropped. So all we have to do is desert dot are equal, and then we want to grab our string of text that we're going to validate, which is here, and then we just need the text from our target object. So that's target element, not text right there. Awesome. And let me dio. Yep. Perfect. So that is basically are simple test. We are dragon dropping the source element to the target element and performing that. And then we're asserting that the text was changed to dropped from the original text, which has not dropped. Right. So now we can go ahead and run it and make sure that assess passes. 8. 08 Executing the first drag and drop test: Okay, so let's go ahead and step through this test. I'm gonna pull this over here on the left. I'm gonna put our application over here on the right and close that for now. Let me drop a break point here at our Web elements, and then I'm going to right click on do debug tests. So now it's gonna pull up. Firefox driver. You guys can see the output right here. It's using end unit. I'm running it through visual studio, but it's using and you know it. And you guys can see N unit adapter is running the tests, so give it a second it started. It's logging out port. I can put that here. I'm gonna put this guy over here so it's going to go to our Web page announced there, and actually, it already did this part where it found our frame and switched to it. So now the next step is let me zoom out a little bit is to find our elements right. So I'm going to step over this, and normally I'd used the keys, but because I'm recording the screen can do that step over this step over that. So now I got our target element. You guys concedes here, and I got our source element. So now is going to perform the dragon drop action, and it's gonna move the source element to the target elements. So if I step over this, you guys will see that happen here. Boom. How awesome was that? And how we just gonna validate that? This dropped has been changed. And our target element, if we look at it's taxed. You guys concedes dropped. So that's definitely going to match up. And I'm going to do that, like, right here. Finished it up with a continue. And our test has successfully passed. We can look over here and the our test explore. You guys can see that example One passed and actually let me rename. And just to see you better on the test explorer. There you go. Quickly. Build that during the test. Explore it Easier. Drag. Drop Example One right way easier to read, way easier to understand. So now you guys were able to see this entire test. What happened, you guys? So how easy it is to do an action like a dragon drop. And here I used a perform because I didn't need to build this action and then performance later. But if we did want to do that, you guys could have done something like this Build. Okay. And then later, or if you wanted to do something, you could do, build outperform If, for whatever reason, you needed to do the dragon drop again or, you know, for whatever reason, you mean you want to pre build this action and use it and do it again and so on and so forth like that. Okay, get rid of all that. Awesome. So there it is again. The source code is gonna be in the course Notes. This will be available for you there So you can get that there and follow along with our tutorials. If four would have a reason, you get lost. 9. 09 Starting to write the 2nd drag and drop example: So now that you guys know how to do a dragon drop, I wanted to show you guys a different way to do it. Dragon drop just because there is another variation. So if you guys think about it, right, a dragon drop. What is that really like? If I pull this up for you guys here and I take this, I click on it and hold it and then drag it here and then release it. Did you guys see what I just did? It? It's a click and hold moved to a location and then release. So any web driver actually has those kind of options available. Theatrics is class. So if we come over here to have 12 you guys can see we can click and hold a web element. All right, then we can move to an element, and then we can release our web element. So that's really the same thing as a dragon drop method here. However, I did want to show you guys that alternative just so you guys can see how that works just to get more variety. Because I know how much you guys love code and tests and examples. So Let's go ahead and quickly write that out. So I'm going to do Dragon drop example to we're going to need all off these same things going on here. We're going to need again the driver in actions in a weight. So rather than inserting it in here and copying and pasting, we're gonna follow the dry principal, right? Remember, don't repeat yourself, principal One of the principles that helps you to write really good code. And so instead, I'm going to extract it out off our class. So I'm going to write a set up and tear down method gonna do those two, and I am going to take this out of here, okay? And then I'm going to do like this. I'm actually going to remove this declaration. Course it complains, and then it's going to allow me to generate a field called Driver. So you guys see that up here? Boom. Okay, then is going to allow me to generate actions, and then it's going to allow me to generate a weight. Okay, so now I got my private variables appropriately named. How awesome is that in here? I just want to pass in a driver. Okay? And then it's of course, complaining about all of these. So you're gonna come over here, I'm going to change this driver so that it stops complaining. Put driver there, that's good. And then it's complaining about a weight. And then it's also complaining about actions so it would stop complaining about everything . I have all of my variables declared up here, and actually I realized I place this in the wrong spot. I'm sorry about that place that in there. And so now, using our set up, this will run before every single test that we right. So it's always going to automatically do this for me, which is fantastic, because I don't have to repeat my code following that, don't repeat yourself principle. And then the tear down is just going to do a driver that close on a driver that quit and the terror down is gonna clean up, and it needs the appropriate attributes. Peer down from an unit 10. 10 Writing a 2nd drag and drop example: Okay, so now that we remove, let's go ahead and proceed with the rest of the test. Now, let's logically and manually think about what we want to do. We want to navigate to a U. R l. And we want to make sure that the frame is visible. Then we also want these target locators. So we're gonna copy all of this code. And again, this part goes against the dry principle where I am repeating yourself. You guys see this duplication of four lines again. But because we're not using page objects here and I'm not showing you guys those, I'm not gonna re factor this because the appropriate place where this would go to his into the page objects. But we don't have that. So I can't show you guys that and the entire point of this tutorial. It's due to user interactions not teach you guys how to re factor and two page actions. So regardless, the next thing that we want to do is use the action class to perform our dragon drop, but in a different way. So I'm going to do actions, and then we can use fluid notation to click and hold right. And what do we want to click and hold on? You guys see, there's two implementations. If I click the down arrow, there's on element sold. That is our source element, right? And then we can also do move to Element now that we got our element that we're holding on to. Let's move to where our destination element, our target element. Now that we've moved to with what's going to be the next thing that we want to do, re wants to release, be quick and held an element. We dragged it over and now we're releasing it. And where we releasing it at the target element, and then the final step is we're gonna build done. And let me put this in a variable with that in the element. OK, next thing you want to do is performed that action. So just like what I was talking about, I wanted to show you guys this. That's a perform. We could have done it here. I just wanted to switch it up a little just to show you guys in different variations. And then what's the final thing that we want to do? Is this same exact assertion and again in one cool thing that you guys are seeing here is how there are a bunch off lines of code. They're constantly being re used over and over. So that's where a bunch of good programming principles like the dry principle, the Agni principal page object pattern, all of them come and play to make your tests way mawr stable and way more reusable and harder to break. But again, that's in the selenium Web driver course. And if you didn't see that, you need to go there and check out all of those sections. But either way we got the test written. Let's go ahead and give it Iran to see how this goes. 11. 11 Running a 2nd drag and drop example: So just like before. Let me put this on the left and close these windows. They're gonna be automatically closed now because we got the tear down method down here that's going to tear everything down immediately after every single test run and we're going to look in the test. Explore. You guys. See how our new test is not there. So what we need to do is build using control. Should be. There you go. Build one succeeded test explore has our new test. Let's go ahead and debug it. Remember, set up method is gonna be wrong first, creating all of our variables that we use like the driver in the weight class. So now we're here. And if you guys take a look was gonna happen here is I'm going to step into this. So you guys hear what happened? It got built, its in here. But nothing happened yet until I do a perform. So check out what happens now. This guy's gonna be dragged over here. Boehm, did you guys see that? Nothing happened until we did the perform before the action was just built. And if you want to reuse this again, we can right, This could be built inside of our page. Object. And then any time you want to do a dragon drop, all we have to do is the dragon dropped out. Perform in our page class, right. If this was a page class and me wanted to do a dragon job, you don't have to keep repeating this. And then the final element. The thing to do is obviously a sort, and me know that's gonna pass because we see it right there. But I'll step over just for your guys sake and then continue. And once that's finishes, we go back to the test explore and we see the dragon drop example has completed successfully. So congratulations. You have just learned how to do dragon drops using selenium, Web driver and user interactions, which is really fantastic because now you ready to do things like testing mobile applications, testing tablets and testing dragon drop in general 12. 12 Drag and drop quiz question: Okay, Fantastic. So now you guys should be pretty much experts in Dragon Drop. And I want to give you guys a little quiz just to make sure that you guys practice exactly what you're doing. And I know that you guys love quizzes, so I'm trying to insert more of those into the lectures. So if you go here to pure example dot com slash j query dashi y slash basic dash, drop a ball dot html and this is also in your course notes. This u R l you will see here another drag and drop example that I found for you guys online . So there's this box that says Dre age me, and you have to drop it onto here on the one that says draw me and when you drop it down here, it says dropped. Do you guys see that? So when you guys do that, it's has dropped. That is your quits. Write me a test that takes it from here and drops it into here and then make sure that it has been dropped. And when you guys come back, we'll check how you did 13. 13 Drag and drop quiz answer: Okay, so let's go and see how you did own this quiz. So we got our driver that navigate that go to your l here and then one of the first tricks that you needed to pay attention to was that there is a frame on this page. So we needed to do just like before where we're waiting until our frame becomes visible and then we switch to it. And then I used the i d off that frame. Now the next step swore, obviously locating the source locator and the destination locator. And here you may have run into another problem. If you try to do the source locator and you try to use a class name, the test would have complained to you and told you that it's not possible I can show you that example. So instead, what you would have needed to do was do something like this where you use X path to locate the element. And again, if you're a little bit confused about this kind of notation and expat, I have a very in depth tutorial on locating Web elements using selenium Web driver. So you need to make sure you go and watch it to understand all of these notations. I did the same thing for the destination locator, but I located it using one of my favorite techniques checking that it contains the text drop here. Okay, so I got the destination, and then I did the standard dragon drop. And actually, we don't even need the build here. And once I did the dragon drop, Now we need to check for the text at the bottom to make sure that it says dropped. And so I did that over here by getting the text. And then I do an assertion to compare both of them for equality. So it's pretty simple. Three things that may have tripped you up or the frame right. This locator here and the other thing that may have tripped you up here is you may have noticed that the pages extra slow. So what I had to do is actually sat the web driver wait to 15 seconds instead of the six that it was before. So hopefully you got over all of those hurdles and you were able to figure it out Now is go ahead and run this. You will remember that this one is going to fail because it has an improper source locator . But I wanted to show you guys the air just so you know what that looks like and how to handle it. As you guys can see the page loads of really slowly. So this one failed. If you come over to the X over here and click on it, it will show you the air. Check out the given, select their square. You. I drag a ble is either invalid or does not result in a web element. Compound class names not permitted. You guys see that this is a compound class name and it's not allowed. So something else for you to remember. So instead, you got to do this and then we'll rerun it again. Wow, Chicken on. Did you guys see how it just got moved over, which was awesome? And then if we look over here, it's ah, green check mark, meaning that our test passed. So hopefully you did well on this one. Let's go ahead and proceed 14. 14 How to do a resize action with selenium webdriver: Okay, So there are many examples that we can go through here with user interactions. Hope that you can yourself navigate through a ton of the examples and utilize them as you need. But I didn't want to show you guys another tricky scenario that you may come across in the future whenever doing some kind of user interaction automation. And that is the re sizable style of interaction. That's where you take your object and you drag it like this. OK, so if we're going to write a test for this and do these user interactions, let me refresh this page and analyze what happens to the HTML. So if I come over here and select this object, you guys can see that it's HTML looks like this. And then if we take our navigation thing and hover over here, we can see that there is a handle that we can take and drag it right. And we already know that selenium Web driver has a click and hold method. And so when we're manually doing this, we're clicking and holding here. And then we started dragging it. And so if we drag it and I let go and then I hover over this again. You guys can see the now This has a style attributes with a with and a height because we've made it bigger. So let me show you guys that again look without being dragged and dropped. It does not have a style attribute, but when it gets dragged, then when we look at it, it has a style. Okay, So if we were to do a dragon drop to a certain spot on this canvas, then all we would have to do is check that it has a style property and that would tells that it has been rece iced. If you want to go ahead and check the actual values, you can do that as well. But for our purposes, just to make sure that we actually resize that checking for style property is enough. And so let's go ahead and take a look at the code is going to be very similar to what you guys have seen before. I named that the re sizing example up here and the standard procedure we navigate to the U . R L. We find the frame now the one thing that you need to do here is find that re sizable handle . And when we look at the html of the re sizable handle, we can see the properties here in the dust of a class name which we can utilize here. But as you guys know, selenium Web driver's gonna complain because of these spaces. So we need to use X path. And so, using an expat, this is this kind of an expression that you get again. This tutorial on identifying elements isn't the complete selenium Web driver Course of make sure you go and see those tutorials. If you're confused about this, we get a really in depth about X path and all this kind of stuff and identification of elements. But anyway, so once we identify the handle, now we're going to use our actions class to click and hold on the handle, right? And then we're going to do the move by offset the method and move by Offset just moves the element a certain direction into the axe And why co ordinates. So you guys can see here? It's an end. So I just move that 100 pixels by 100 pixels and then I'm doing a perform and then Finally , I'm doing our assertion, making sure Let me take this expression that if this I d with style exists and if it exists , then our test this past and the element has bean resized. So let's take a look to see if with Ron's gonna come here and click Ron and you guys can watch the Testa's. It happens as well. So you guys saw that right? It resized, and then our test passed successfully and we have successfully resized an element, so that's another cool technique that you guys can use. 15. 15 How to open developer tools with selenium webdriver: So now I want to teach you guys something extremely cool and extremely useful that I have found in my career. Doing automated software testing, especially on the gooey style elements, is opening up the network tab. You guys know how in all of the browsers there's a developer. Tools will be utilized to locate our elements. Well, it can get further than that. There are multiple other types that are extremely helpful when it comes to debugging, and I found that the network tab is one of the most useful ones because if you're designing some kind of a test and your application is really slow to load, sometimes it's helpful to see the network tab to see why the application is really slow to load. And then that way, if your application is, you know, taking 10 20 seconds to load for some reason. In fact, I think more than five. It's crazy, but it's taking a really long time to load. You can locate in the network tap to see which call is taken an extremely long time toe happen, and then you can report that to your developers and you can continue to expand this even better, because if you're running in a cloud based service like browser stack or sauce labs, where your videos air being recorded off every single test Ron wins time for you to debug y test failed. You just go in, watch the video and see the network time to figure out what's going on and why your application is being extremely slow. And that may help in the debugging process for the developers. Really, I've called numerous bugs and numerous problems because I had the network tab open using my browsers, so it's been very helpful. So not only am I gonna teach you guys that, but also along the way we're going to kill two birds with one stone, and you guys are gonna learn how to do some key down and key up actions and how to send keys using user interactions. So it kind of kills two birds with one stone. You not only learned hot, open network tab, you also learn how to do a few other actions using user interactions. Now here is where flakiness can come in and you guys need to be really careful, because commands for different kinds of browsers are usually different. So, for example, to do open up the network tab with Fire Fox. All I had to do was Google how to open the network tab with keyboard shortcut keys on fire . Fox and I got this page. I'm gonna put this in our notes, and you guys can see that if I want to open a network monitor using Firefox, the command for Windows is different than the command for always sex. And it's different than the command for Linux. So you guys need to be mindful of that. And you probably need to start setting up some kind of logic to be handling different kinds of browsers. If it's one browser you do control shift. Q. If it's over a sex you to do command, opt que So that's where the flakiness would use Their interactions can command, but if you handle it appropriately, you will be OK. So let me show you if I hit control shift Q. Right now, on my Firefox, you guys can see how it opened up the network tab, and there are many other tabs here available. But I found the network tapped to be the most useful, and if I refresh it. You guys can see how in the network tab we see every single call that is occurring from the HTML page, which again I like I said, is gonna be very useful for you. And I found it very useful my career. So that translated in code is actually pretty simple here. I'm navigating to google dot com far just to open up a page, and then we're using again the actions class to do key down. And there is this class called keys that allows you to pick which key you want to send. So, for example, control shift cues what we want to perform, right. So if you do keys dot control. You guys see that it's all in here. The keys class has all of the keys that you need to do. Like add all the air down air left there. All right. You know, if Juan through of 12 help home number pad, page down, subtract all of these keys are there for you to utilize. So it makes it very simple to passing the keys that you want. And so I'm chaining. I'm pressing the key down on the control. Then I'm pressing a key down on the shift, and then I'm not pressing a key down on the Q because that's not allowed. I am sending keys to the Q, which is the keyboard, and then I am performing that action. And afterwards, right now, you imagine splaining Web driver has the keys press down. You need to make sure that you release those keys. Otherwise you'll get weird behavior because control shift is still pressed down. And so you're always pressing it down as you're doing the rest of your actions. So immediately after performing, you need to release. And so here we're doing a key up. I'm releasing the keys that control and keys that shift again, and then I am performing that I'm letting them go. And then we're navigating to that slow page with the Drop herbal example just to see the network traffic. Let's go ahead and give this Iran just to see what that looks like. 16. 16 Running a test that opens a network tab in firefox: so I'm gonna come over here. So like this click run and then we'll watch it go. So it's gonna pull up google dot com, check it out open on the network tab. We got the network running, and now we're switching. And you guys remember that this page is really slow, and this will actually show us why this page is so slow. So right now we see that there was some call that occurred here that started after 10.5 seconds. Now this call started at, like, 17 seconds, and it took a while. So you guys were able to see the network tab and the network traffic going on. And like I said, this is most useful for the bugging. Sure, but when you have it running in something like sauce labs and browser stack where the videos were recorded, its makes it really easy to go back and see what's going on with your application and wide so slow, right? It's those like, intimate and failures that sometimes you may get where the test fails, and then the next time you're on, it passes that one time that it fails, you can go in and dig into the network Time to see exactly why it failed. And those intermittent heir's heir usually the worst ones. The trickiest one to catch because it's so easy for us to just lead them going back. Okay? Yes, it happened. It's a little weird, but maybe it was my test. Now you have the tools in your arsenal to say whether it's your test or not using the network tab. Okay, Fantastic. So now you guys should be pretty well versed in using the actions class. We've done multiple examples over dragging and dropping. We've done it in multiple different ways. We've dealt with I frames, we've done re sizing and you guys know how to open up the network tab using Firefox. You guys can extend this open on developer tools. Open up other things. You guys got the main idea here. So you're making amazing progress. Congratulations. 17. 17 Drag and drop with html 5 quiz question: So now that you guys are very proficient in user interactions, I would like to give you guys another quiz just to test your knowledge and make sure that you guys are on par with where you need to be. So let's do this. We're going to go to this page here. This is Dave Half Nurse practice page, which I really like a lot. They've Hefner's one of my favorites, selenium gurus. He has his dragon drop age. Right? And the goal here off this tutorial is to take this element and drag it over here. And you guys notice that when we take it from here to here, A is now here and B is here. If you drag it the other way, it goes back. So use your dragon, drop it and assert that it's been dragged to the right location. So that is your quiz. Go ahead and give it a shot of write some code and when you come back, we're going to see how you did 18. 18 Drag and drop with html 5 answer part 1: So let's go through the problem and see if you were able to get the appropriate solution. I am going to assume that most of you did not get the solution to this problem and why. It's because I was a little bit tricky with you guys. The problem that I gave you all is actually using HTML five and in selenium Web driver, there's a known issue where HTML five Dragon Job a dozen three Lee work. So I apologize for tricking you guys. But I thought it was a really good quiz because it kind of shows you that there are many different kinds of dragon drops available in the industry, and sometimes they may not work. So I hope you did a little bit of digging and were able to come to some solution. Usually, I personally just go to Google and try to figure out you know why something isn't working. Try to Google my problem, and if I'm not able to do so, icona, just start playing around with the HTML and Elements and see if I can find a solution. Will in either case, Google dust of a solution to this problem, and I'm going to show you guys that now and you'll be able to utilize it in the future, just in case you do run into this problem again. So as I said, HTML five dragon drop with selenium Web driver doesn't work. So what you have to do is actually used this drag and drop helper that this gentleman over here was kind enough to create for us on Get Hub. I found this through over stag because I ran into this problem when I was wondering, Hey, why doesn't drag and drop work? Well, it's because it's not supported, but html five. And so this guy provided a solution where he created this dragon drop helper dot Js file the week and Ron in order to simulate a dragon drop in. All we need to do is pass in the element, identify IRS, and it will perform the function. So what you're gonna need to do is you're gonna need to download this Dragon drop helper, which is gonna be available for you guys in the course notes. And I'm also adding it with source code so that you will see it there. And when you download it, your code we look something like this. So if I scroll down a bit here, we're going to navigate to this website and then we're gonna wait until our source element that's present. I want to make sure that that's the source element. So if I refresh this and then I click on this, you guys can see that the source is column A and then the target is column B. Okay. And then you guys can see that it has a header of be OK, but what happens when we dragged us over to here? Well, I'm gonna take it and drag it. So now a is here, but it's Hatter is be, and B is here, but it's header is a You guys see that? So that's how we know that it was dragged to the appropriate place because column B is gonna have header a so identified my source after knowing my source. The next thing that we need to do is we need to read this entire dragon drop helper that Js file. So I'm using the file Die Riedel text method to store it inside of this variable. Now, using the Java script executor interface, we are going to execute some Java script. So that's just the standard method provided to us by the selenium Web driver library. And we do execute Java script. We're gonna put in the file and then we appends to it. This string a right here. And so in this hashtag we place an I d. And in this hashtag we place another I d off our target. So you guys can see this hashtags and C s ass. It means I d So we're putting in our idea of the doors and then our i d off the target. So that's the only things that I needed to replace. Okay, I d here of the source. I d here over the target now utilizing this, it should simulate the dragon drop. 19. 19 Drag and drop with html 5 answer part 2: The only other thing that we need to add here is our assertion. So what exactly do we want to assert? Well, if we take a and drag it over to be, was gonna happen is we're gonna have column B with Hatter A. So using this locator here, I d column B and then go down into the child off header. We're going to be able to get its text to say that it's a so let's assert that. So now we got our element, and now I'm going to do dot text. Okay, Expected goes here, which is a followed by the actual close parentheses. Put a quote and we're set one more parentheses. Awesome. So that should do it. Let's go ahead and give this Iran. Did you guys see? I know it was brief and quick, but it did switch and I can actually put a break point here, and we can do a debug. And just in case you guys don't believe me, begin running a little bit slow and have it stop there so that you guys can see that it actually switched loading the page. And now if we take a quick look here. You guys can see that A and B have switched. And of course, our assertion passes as well. And so you get a green little check mark here that tells us that the test have succeeded and if it didn't succeed, you can change this to B, and you can see that this is now going to fail because B is not going to be here just to make sure that our logic is good. I like to rerun the test and see that it failed. And why did it fail? Was because strings different index expected B but was a so that's good, right? So that is awesome. You guys have learned now how to do a dragon drop using HTML five as well. Hopefully in the future selenium Web driver's gonna fix this issue, which I'm sure they will need to. As you know, all the websites progress to html five. But in the meantime, you can use this drag and drop helper that Js file and Iran it in this manner to achieve this 20. 20 How to draw on a canvas with selenium quiz: So before we get to the final exam, I have one more quiz for you guys that I wanted you to try so that we can further practice coding. And on this gooey interactions that html page, I want you guys to try and draw something in this canvas. Now doesn't have to be any kind of picture, but, you know, try to do something like this and then make sure that you actually drew something. So that is your quiz. When you guys come back, we're gonna go ahead and see how you did. 21. 21 How to draw on a canvas with selenium quiz answer: So how were you able to draw on the canvas war? You able to successfully do it or not? Well, let me tell you guys that if you were able to successfully actually drawn the canvas and do what I showed you guys there, that is really amazing. And I am extremely impressed with your skills because it is extremely hard. In fact, it's so hard that even I wasn't able to do it. I spent a couple hours trying to figure out how to draw on that canvas and get those curvy lines going and being able to control where I draw on the campus. And I wasn't able to, and so I just basically had to give up. So if you were able to do it, I'd love to see your logic and how you are able to implement that. But one important lesson that I did want to share with you guys here is that sometimes some things are just so hard to automate in the U. Y. That maybe it's not worth it at the end of the day, right? Do you want to be spending a few hours trying to figure out how to automate a single element? Or would you rather spend those few hours and write a few other tests for your application , which will cover more functionality? Maybe you can do some performance testing or security testing instead. So that's the question that you have to ask yourself sometimes if you notice that your spending many hours trying to locate an element and you're not able to do so and you have to do all of these backwards and workarounds that seem very crazy, I would recommend you first just go talk to a developer and let him know the problem you're having. Sometimes the developer may be able to help you really easily in bed. Oh, I know how to do this. Or, if they don't know, maybe they can throw an I d for you on there or make it an easy way for you to be able to automate that element. And if neither of those conditions help you out in your situation, it's totally okay to just drop that automation tasked and work on something else that can provide your company a lot more functionality and a lot more coverage. Sometimes it's just not worth it to spend countless hours trying to automate something that may not be automata ble or when you do end up automating it, it just becomes a complete nightmare to maintain just because it's so brittle. And so that's what I was working on here, was trying to draw on this freakin canvas, and I just was not able to. I basically started by trying to just have a random loop that generates a bunch of random numbers, and Ron's a bunch of random times. So I was running it like 200 times trying to generate random numbers. And then I was trying to draw using the actions class. But I was using the click and hold method, and I was clicking and holding on the actual element, the canvas, and that was not working for me because every time it would click and hold and then for some reason it would only draw like a dot. And so I switched to a dragon job to offset, started doing the same thing again, trying to draw on random into jurors on the canvas that wasn't working. So then I thought, What if it's actually not drawing on the canvas, but drawing somewhere on the page and the canvases Onley in a certain location. So then I got the canvas location using its X and Y coordinates, and I thought, Let me get a random integer and subtract the X and Y coordinates from the center off the canvas and be able to draw on like the different sides over the canvas. However, still, that did not work out, and I basically just had to give up because I literally spent a few hours trying to do this and it wasn't worth it to me anymore. So if you were able to do it, that's amazing. Congratulations. I would honestly loved to see how you did it. Just let me know. And if not, it's no big deal. This is one of those that you can just pass by and not worry about it anyways. So now that we're done with a bunch of our quizzes, I suggest that you proceed and take the final exam 22. 22 Conclusions for course: so that about wraps it up for this user interactions course with selenium Web driver. I wanted to thank you all for being here today and taking your time to watch the scores and learn and improve your skills. I'm really glad to have you guys here anyway. So what we were able to learn throughout this user interaction tutorial is how to use user interactions with selenium Web driver extremely well. We learned a lot of different aspects off the actions class. We learned that what the actions, classes and how to use the actions class and how to build different kinds of actions. We did a lot of different kinds of dragon job examples. We did a standard way where you guys learn how to use the dragon drop method. Then you learned a different way of doing a dragon drop, which was a little bit more complicated. But again, another way to dragon job. And we just learned a bunch of different methods like the Click and Hold moving to elements releasing, building and performing. After we learned the Dragon drop, we learned how to do a re sizing example, and we took an element and we were able to resize it successfully, which is another thing that can become useful to you if you're doing things like mobile testing. And that was just a simple click and hold and a move to offset method. After we learned that we learned one of the best techniques that you can utilize. It's how to open the network tab. Using Firefox, passing in different kind of keys, we were able to pass in like a short cut to fire Fox and which was control shift Q. To be able to open on the network tab and to be able to watch the traffic as the application loads, and that whenever we're running in browser stack or sauce labs or in the cloud whenever we're recording videos or screenshots, it can really help us to debug issues with our automated test because we are able to wash the traffic and were able to see what's going on with http requests that the application is sending. Finally, after we got through the network tab, we tried another quiz with HTML five, where we try to do a dragon drop and you guys probably ran into some issues there because I never taught you guys how to do any of that. And in that case we had to use a JavaScript executor and the Java script file that was created for us to be able to simulate a dragon drop using Java script. That's the only work around right now that stands and selenium Web driver. And so that's what we had to do with HTML five. Finally, I brought to you guys a drawing quiz that I personally wasn't able to complete successfully . But it's no big deal. It happens a lot. Sometimes we run into very hard things that need to be automated, and it's better to avoid it and work on something else that could be much more useful to the business. Been spending hours and hours trying to automate something that maybe should not be automated. And so that was our entire user interactions tutorial. You guys should have learned a lot by now. You guys are seriously experts. If you bring any of this knowledge, your interview jer to your jobs, you guys will impress everybody, including myself. And I'm very happy to have you guys here today. Thanks for taking this course now Just go ahead and proceed to the final exam so that you can get your completion certificate and your linked in profile certification upon completion of the exam, take care.