In this blog we will be utilizing Playwright Java to handle gestures.
Topics that we will cover:
- Handle sliders
- Handle resizable element
- Source code (slider)
- Source code (resizable)
Handle sliders
To understand sliders, go to https://jqueryui.com/resources/demos/slider/default.html
As can be seen above, there is a slider that we can move to right and left on the horizontal x-axis.
Let us inspect the slider and copy the xpath
Thus we can locate this element as shown below
We will than fire an event called as 'mouse down' to move the mouse
We will than move the slider to 600 pixels on the x-axis. However y-axis will always be 0. So we can simply copy the slider.boundingBox() code for y-axis as is
Finally we will release the mouse
Handle resizable element
Let us now go to https://jqueryui.com/resources/demos/resizable/default.html
We see a re-sizable element that we can drag horizontally (x-axis) and vertically as well (y-axis)
Since we can resize vertically as well, let us add 300 pixels to y-axis
So we have made changes to only 3 lines, see below
Execute.
Notice below that resizable element moves the desired number of pixels to x and y-axis
So this is how we can handle slider and resizable elements using playwright java.
Source code (sliders)
package com.rsa.playwrightjava;
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 Blog29_Slider {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://jqueryui.com/resources/demos/slider/default.html");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
Locator slider = page.locator("//*[@id=\"slider\"]/span");
page.mouse().move(slider.boundingBox().x + slider.boundingBox().width/2, slider.boundingBox().y+slider.boundingBox().height/2); //to move mouse to middle of this element
page.mouse().down(); //to move the mouse
page.mouse().move(slider.boundingBox().x+ 600, slider.boundingBox().y+slider.boundingBox().height/2);
page.mouse().up(); //release the mouse
page.pause();
page.close();
playwright.close();
}
}
Source code (resizable)
package com.rsa.playwrightjava;
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 Blog29_Resizable {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://jqueryui.com/resources/demos/resizable/default.html");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//locate slider element
Locator slider = page.locator("//*[@id=\"resizable\"]/div[3]");
//to move mouse to middle of slider element
page.mouse().move(slider.boundingBox().x + slider.boundingBox().width/2, slider.boundingBox().y+slider.boundingBox().height/2);
//to move the mouse
page.mouse().down();
//move mouse to 300 pixels horizontal and vertical
page.mouse().move(slider.boundingBox().x + 300, slider.boundingBox().y + 300);
//release the mouse
page.mouse().up();
page.pause();
page.close();
playwright.close();
}
}
Thanks.