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.


Tags


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}