Automating the Mouse (drag and drop, hover, special clicks)

A core way that users interact with the webpage is by using the mouse and no surprise playwright has a pretty comprehensive API for controlling the mouse interactions on a webpage. To demonstrate some of these interactions, we have a very simple application consisting of a simple button. We can hover over the button and you can see it gets a bit big when we press the mouse down. You can see that it gets a bit small and when we lift the mouse up, this results in a click as displayed by the message below. We can also press the button two times very quickly and this results in a double click and that is also displayed by the message below.

We can also press other buttons from our mouse. For example, we can press the center button and this results in a middle click. We can also hold modifiers during our clicks. For example, we can hold the shift key and now when we do a standard click, we get the message shift click. All of these interactions that we've looked at can also be automated using playwright. So we create a simple test to demonstrate various clicks. First up, we have page pause. So when our test starts, we stop at the first step so that we can walk through the individual steps. Then we create two simple locators, one for the button and one for the message that is displayed.

When we interact with the button locators provide a method called hbar and this will automatically move the mouse on top of that locator. We also have a property mouse that is available on page that has a number of methods that can be used to control the mouse. For example, we can use page do mouse down to simulate the user pressing down the button of the mouse. And similarly, we can use page mouse dot up to simulate the button being lifted. So right now we have moved the mouse to the button using button dot hover, then pressed it down and then up. And this should essentially result in a click. So we expect the message to have the text click.

Now we don't have to actually do click this painfully. We could actually easily do locate or click, and this will actually carry out all of these steps for us. In addition to a single click, we could press the button twice resulting in a double click. And playwright provides ELT method called double click for that purpose as well. We could even change the button that we are clicking by providing the button property. For example, we can simulate a middle click by setting button to middle, and we can even provide modifier to simulate holding down different keys. For example, here we are providing a single modifier of shift to simulate a shift click.

Now by default, all clicks will happen at the center of the locator, but we can change this behavior by providing a position property. So here we are clicking the top leftmost corner of the button and there's actually a secret message associated with this. So the message will display special click. Now let's run this test through playwright to see it in action. We are currently paused at the first step. When we press continue, you can see that the mouse is now going to start hovering over the button. The button becomes big, we press the mouse down, the button becomes small, we press the mouse up, and this results in a click,

and the click message is displayed. Similarly, clicking on the button directly also results in a click message. Double clicking results in a message. Double click middle clicking results in middle click. If you provide A modifier of shift, this will result in a shift. Click and clicking on the top leftmost corner of the button results in the secret message. Special click. And hopefully at this point you have a special clicking relationship with play. Right In addition to clicks, the other core interaction that a mouse has on a webpage is movement on different elements,

and playwright provides simple methods for these styles of interactions as well. For this demo, we have a simple application consisting of two elements on screen, something containing the text alpha in blue, and something containing the text omega in red. We can actually click and drag on any of these elements on screen, and we can even drop them on the other element. For example, if we try to drop alpha on top of omega, omega will turn purple. And then once we drop it, now Alpha is in the second position and Omega is in the first position. And of course we can repeat this as many times as we want.

So if we take Alpha and drop it on top of Omega again, now Alpha is in the first position and Omega is in the second position. Now let's take a look at how we can automate and test this behavior. Using playwright. We create a simple test and kick it off with page pause, and then we create simple locators for the alpha element and then for the Omega element. And then because we want to verify that the order of the elements changes, we create this ator for all of the children of the container by first getting the container using a get by test id, and then selecting all of its children with a simple CSS star locator.

Initially we expect the order of the items to be alpha followed by a macca, and we can expect that with a simple assertion using to have text. Using our existing knowledge of controlling the mouse, we can move the cursor on top of the alpha using alpha hover, then press it down by using page mouse down, and then move it on top of omega by using omega hover. And then let go of alpha on top of omega by using page mouse up. And based on our knowledge of the application, this should result in the order of the items changing. So now the container children should have the text omega

followed by alpha, just like there is a convenient method for click. Playwright also provides a convenient method for this scenario, and that method is called drag two. So we can actually take the alpha locator and drag it to the omega locator, and playwright will carry out all of these actions for us. And this should result in the order of the items swapping back. So now the container children should have the text alpha followed by Omega. Now let run this test to see in action. Currently we are paused on the first post statement. The first verification that we have is that the text should be alpha followed by Omega.

Then we move our mouse to alpha, press it down, move it on top of Omega, and now we can see that the color of omega has changed. And now when we let go of the mouse, the order of the items has swapped. So it's now omega followed by alpha. And we verify that by using our expect statement. Next, we use the builtin method, drag two to do the same thing again. And this will carry out all of these actions for us. It'll take alpha and drop it on top of Omega. And now we can expect that the order of the items should be abbit to alpha followed by Omega.