Playwright Tutorial #29 - How to Mouse Hover in Playwright

hey everyone welcome back in this section I'm going to discuss about different mouse and keyboard operations that are available within playright I'll cover the most common operations that you'll be using mostly in your automation projects in the at the Enterprise level but then documentation is already there in case you need any specific operation that I'm not able to cover in this particular section you can straight away go to the official documentation which I'll be walking you through right now it's not possible to cover each and every method that is available but I'll guide you through the process of reading the documentation and going through each and every method in case it is required in specific very edge case scenario that you're looking for so when we talk about mouse and keyboard operations this is very helpful and in the scenarios for example you have certain web element wherein you have to hover over that particular web element Mouse over do the right click do the double click Etc so these are certain Mouse operations that you might have to do then in terms of keyboard operations you might be able to or you might be required to do certain keyboard operations or type in the key in a sequential fashion for example when we say fill we are sending the text as a whole and it fills in a particular text box right there might be a requirement in your application that you that the scenario asks person to type numbers one by one right so in those sort of scenarios you can use keyboard operations to type in say for example pin okay 4digit pin six-digit pin Etc so that's where keyboard and mouse operation understanding of these is important and how you are going to use it now first thing we want to cover is the very common Mouse hover okay so if you see amazon. com I go to this account and list right so if I just move the mouse over account and list you'll see the popup appears here where there are certain links so in case I have to go ahead and click on any of this link then I have to first Mouse over and then click on any of the link right so if I don't Mouse over this is not appearing and my script is going to fake right similarly gift card or prime you'll see these cards open only after Mouse over similarly on other website which is flip cart if I go to the login you'll see the different menu options below login appear only after Mouse over Okay so let's quickly see how we can write a script in playright with JavaScript to Mouse over on this particular login button here and then say for example click on my profile or whatever options are available there okay so the first thing is I have created a test script already so just a dummy script here wherein I'll cover all of the mouse operation and keyboard operation so the first test that we are writing is the mouse over and we will go first thing is we want to open a particular application where we want to Mouse over or whichever web element we want to Mouse over so here we'll open flipcart. com right so I'll say go to flipcart.

com and the next thing is I want to basically get the locator of a web element where I want to Mouse over okay so the locator for this login right so I'll simply open the selector Hub expart plugin okay and then to inspect I'll click on this inspect icon here and simply inspect this particular login button there right and you'll see that this looks Dynamic okay so because you'll see that there is a indicator here this class looks Dynamic and it looks like because there it's a random number in there so what we'll do is maybe we'll just instead of using selector Hub I'll simply go the traditional way because not all the times the plugins might be helpful so we'll simply go ahead and say select the login button here it's a div right and then we know within there it has this text login okay so let me let me try writing the xath so this is basically div all right and then it div contains text login okay yep so it figured out that there is one web element right so most probably this should work so we'll copy this and use it right so I'll simply say page. locator okay so first we have to figure out the locator so this is the locator that we have figured out for the login button at the top right and then we have to hover over it right so we know that there is a there is a method hover so we'll simply say hover method okay we'll call the hover method on that particular locator okay now here within the hover method you will see there are certain options available so you can force the hover as well which is a Boolean value by default it's false if you want to force it you just pass that Force as true then there are certain modif fire so for example you want to press a key on the keyboard and then Mouse over you can also do that by passing in the modifier modifier as well similarly for the position you want to specifically Mouse over on a particular coordinate you can pass in the position as x and y coordinate and then timeout and trial as well which is a bullion okay timeout is you want to specify a time out that after this particular time the step if the hover is not successful it times out right so these are certain options available and in terms of documentation you can straight away see it here or if you go to the documentation here you will see all these details if you go to the hover method you will see what all arguments it accepts you will be able to see all those arguments right the different options of force modifiers this is no waight after is dicated but position timeout Etc are all options that are available okay these are the arguments that you can pass but as of now it's for overing over on particular locator hover method should be absolutely fine and that's pretty much it for hovering over on that particular login now what I'll do is I'll wait a little bit so I'll just put a time out right I'll wait for a particular time out so for example 4 seconds before the script closes or page closes so you are able to see that every the H is happening and you can see the submenu below the login okay so this looks all good now let me go ahead and and execute this particular script okay so let me clear and run this particular script so to run this test npx playright test and specify the file name which is mouse and keyboard spec.