Playwright is a powerful Java library for automating web browser interactions and performing various actions on web pages. One common action is double-clicking on a button.
We can double-click on a button using a couple of ways –
- Using dbClick method
- and by using the evaluate method
We will use our selenium playground website to double-click on the below-highlighted button. The button is present on the page – https://testkru.com/Elements/Buttons.
![double click element](https://www.codekru.com/wp-content/uploads/2022/10/1773C45C-26CF-48F2-8C63-7E1858C7F14C.jpeg)
Using dbClick method
Playwright provides a dbClick() method to double-click on a specific element.
We will locate the highlighted element and double-click it using the dbClick() method.
So, let’s inspect the highlighted element to find the locator we can use.
![DOM of double-click element](https://www.codekru.com/wp-content/uploads/2022/10/CEEF9904-C911-472B-8DAC-BDCE4214EB86.jpeg)
We can see that the id attribute’s value is doubleClick. We can write an XPath using it and locate the element.
//button[@id='doubleClick']
locator() helps us locate the element in the playwright framework. We will use it to locate our element.
Locator buttonLocator = page.locator("//button[@id='doubleClick']");
Now, use the dbClick() method to double-click on the element.
buttonLocator.dblclick(); // double clicking on the element
Let’s see the whole program and the things in action now.
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newContext().newPage();
page.navigate("https://testkru.com/Elements/Buttons");
Locator buttonLocator = page.locator("//button[@id='doubleClick']");
System.out.println("Text before double click: " + buttonLocator.textContent());
buttonLocator.dblclick(); // double clicking on the element
System.out.println("Text after double click: " + buttonLocator.textContent());
browser.close();
playwright.close();
}
}
Output –
Text before double click: Double click on me
Text after double click: I was double-clicked!
![](https://www.codekru.com/wp-content/uploads/2023/03/91CD6068-357B-4BE6-AE6E-1B4360DACDB6.jpeg)
evaluate() method
We can also double-click the button using javascript and then execute it using the evaluate() method provided by the playwright.
Below Javascript code can help us double-click on the highlighted element –
var button = document.getElementById("doubleClick");
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('dblclick', true, true);
button.dispatchEvent (clickEvent);
The above script gets the element using the id attribute’s value and then double-clicks on it. Now, we will execute it using the evaluate() method.
String javascript = "var button = document.getElementById(\"doubleClick\");\r\n"
+ "var clickEvent = document.createEvent ('MouseEvents');\r\n"
+ "clickEvent.initEvent ('dblclick', true, true);\r\n"
+ "button.dispatchEvent (clickEvent);";
page.evaluate(javascript); // double clicking on the element
Let’s see the whole code in action.
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newContext().newPage();
page.navigate("https://testkru.com/Elements/Buttons");
String javascript = "var button = document.getElementById(\"doubleClick\");\r\n"
+ "var clickEvent = document.createEvent ('MouseEvents');\r\n"
+ "clickEvent.initEvent ('dblclick', true, true);\r\n"
+ "button.dispatchEvent (clickEvent);";
Locator buttonLocator = page.locator("//button[@id='doubleClick']");
System.out.println("Text before double click: " + buttonLocator.textContent());
page.evaluate(javascript); // double clicking on the element
System.out.println("Text after double click: " + buttonLocator.textContent());
browser.close();
playwright.close();
}
}
Output –
Text before double click: Double click on me
Text after double click: I was double-clicked!
This is it. We hope that you have liked the article. If you have any doubts or concerns, please write us in the comments or mail us at admin@codekru.com.