There are three keyboard events in JavaScript.
a. keydown: Key down event is fired whenever a key is pressed and it keep on firing as long as we are holding the key down. Keydown event is fired for all the keys.
b. keyup: Key up event is fired whenever a key is released.
c. keypress: key press event is fired whenever a key is pressed. Unlike keydown event it is not fired for special keys like alt, tab etc.,
keydown vs keypress
a. If you press any special key, browser will fire only key down event, not the keypress event.
b. The keydown provide a code indicating which key is pressed, while keypress indicates which character was entered.
For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events.
Locator.press method
Locator.press() method produce a single key stroke on the selected element.
Example
page.locator("#demoInputField").press("A");
All the keyboard shortcuts like shift, ctrl, esc are supported.
Example
page.locator("#demoInputField").press("Shift+A");
page.locator("#demoInputField").press("Meta");
page.locator("#demoInputField").press("Control");
page.locator("#demoInputField").press("Alt");
page.locator("#demoInputField").press("CapsLock");
page.locator("#demoInputField").press("Escape");
page.locator("#demoInputField").press("Shift+ArrowLeft");
page.locator("#demoInputField").press("Shift+ArrowRight");
page.locator("#demoInputField").press("Shift+ArrowUp");
page.locator("#demoInputField").press("Shift+ArrowDown");
Find the below working application.
keyEvents.html
<!DOCTYPE html>
<html>
<body>
<p>Type any key in the text box to see the key event demos</p>
Type something here: <input id="demoInputField" />
<p id="result"></p>
<script>
document.getElementById("demoInputField").addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
document.getElementById("result").innerHTML += `Key down '${name}', Key code value: '${code}',<br />\n`;
}, false);
document.getElementById("demoInputField").addEventListener('keyup', (event) => {
var name = event.key;
var code = event.code;
document.getElementById("result").innerHTML += `Key up '${name}', Key code value: '${code}'<br />\n`;
}, false);
document.getElementById("demoInputField").addEventListener('keypress', (event) => {
var name = event.key;
var code = event.code;
document.getElementById("result").innerHTML += `Key press '${name}', Key code value: '${code}'<br />\n`;
}, false);
</script>
</body>
</html>
FileUtil.java
package com.sample.app.util;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
public class FileUtil {
public static String resourceAsString(String resourceName) throws IOException {
ClassLoader classLoader = FileUtil.class.getClassLoader();
URL url = classLoader.getResource(resourceName);
if (url == null) {
return null;
}
URLConnection urlConnection = url.openConnection();
urlConnection.setUseCaches(false);
try (InputStreamReader inputStreamReader = new InputStreamReader(urlConnection.getInputStream())) {
char[] buffer = new char[1048];
StringBuilder builder = new StringBuilder();
int count = -1;
while ((count = inputStreamReader.read(buffer, 0, buffer.length)) != -1) {
builder.append(buffer, 0, count);
}
return builder.toString();
}
}
}
KeyboardEvents.java
package com.sample.app.actions;
import java.io.File;
import java.io.IOException;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.sample.app.util.FileUtil;
public class KeyboardEvents {
public static void main(String[] args) throws IOException, InterruptedException {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium()
.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));
final String content = FileUtil.resourceAsString("actions" + File.separator + "keyEvents.html");
Page page = browser.newPage();
page.setContent(content);
page.locator("#demoInputField").press("A");
page.locator("#demoInputField").press("a");
page.locator("#demoInputField").press("$");
// Following modification shortcuts are also supported: Shift, Control, Alt,
// Meta
page.locator("#demoInputField").press("Shift+A");
page.locator("#demoInputField").press("Meta");
page.locator("#demoInputField").press("Control");
page.locator("#demoInputField").press("Alt");
page.locator("#demoInputField").press("CapsLock");
page.locator("#demoInputField").press("Escape");
page.locator("#demoInputField").press("Shift+ArrowLeft");
page.locator("#demoInputField").press("Shift+ArrowRight");
page.locator("#demoInputField").press("Shift+ArrowUp");
page.locator("#demoInputField").press("Shift+ArrowDown");
String result = page.locator("#result").textContent();
System.out.println(result);
}
}
}
Output
Key down 'A', Key code value: 'KeyA',
Key press 'A', Key code value: 'KeyA'
Key up 'A', Key code value: 'KeyA'
Key down 'a', Key code value: 'KeyA',
Key press 'a', Key code value: 'KeyA'
Key up 'a', Key code value: 'KeyA'
Key down '$', Key code value: 'Digit4',
Key press '$', Key code value: 'Digit4'
Key up '$', Key code value: 'Digit4'
Key down 'Shift', Key code value: 'ShiftLeft',
Key down 'A', Key code value: 'KeyA',
Key press 'A', Key code value: 'KeyA'
Key up 'A', Key code value: 'KeyA'
Key up 'Shift', Key code value: 'ShiftLeft'
Key down 'Meta', Key code value: 'MetaLeft',
Key up 'Meta', Key code value: 'MetaLeft'
Key down 'Control', Key code value: 'ControlLeft',
Key up 'Control', Key code value: 'ControlLeft'
Key down 'Alt', Key code value: 'AltLeft',
Key up 'Alt', Key code value: 'AltLeft'
Key down 'CapsLock', Key code value: 'CapsLock',
Key up 'CapsLock', Key code value: 'CapsLock'
Key up 'Escape', Key code value: 'Escape'
Key down 'Escape', Key code value: 'Escape',
Key down 'Shift', Key code value: 'ShiftLeft',
Key down 'ArrowLeft', Key code value: 'ArrowLeft',
Key up 'ArrowLeft', Key code value: 'ArrowLeft'
Key up 'Shift', Key code value: 'ShiftLeft'
Key down 'Shift', Key code value: 'ShiftLeft',
Key down 'ArrowRight', Key code value: 'ArrowRight',
Key up 'ArrowRight', Key code value: 'ArrowRight'
Key up 'Shift', Key code value: 'ShiftLeft'
Key down 'Shift', Key code value: 'ShiftLeft',
Key down 'ArrowUp', Key code value: 'ArrowUp',
Key up 'ArrowUp', Key code value: 'ArrowUp'
Key up 'Shift', Key code value: 'ShiftLeft'
Key down 'Shift', Key code value: 'ShiftLeft',
Key down 'ArrowDown', Key code value: 'ArrowDown',
Key up 'ArrowDown', Key code value: 'ArrowDown'
Key up 'Shift', Key code value: 'ShiftLeft'
No comments:
Post a Comment