Using ‘page.selectOption()’ method, we can select multiple items from a select tag.
Example
String valuesToSelect[] = { "red", "green", "yellow" };
page.selectOption("select#favoriteColors", valuesToSelect);
Find the below working application.
multiselect.html
<html>
<body>
<h1>Multi select demo</h1>
<form onsubmit="return false;">
<label for="colors">Choose a color:</label>
<select name="colors" id="favoriteColors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="blue">blue</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="display()">
</form>
<p id="result"></p>
<script>
function display() {
let options = document.getElementById('favoriteColors').selectedOptions;
let values = Array.from(options).map(({value}) => value);
let selectedColors = values.join("-->");
console.log(values)
result.innerHTML = `<b>Selected colors: <br />${selectedColors}</b>`
}
</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();
}
}
}
MultiSelectDemo.java
package com.sample.app.miscellaneous;
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 MultiSelectDemo {
public static void main(String[] args) throws IOException {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium()
.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));
final String content = FileUtil.resourceAsString("miscellaneous" + File.separator + "multiSelect.html");
Page page = browser.newPage();
page.setContent(content);
String valuesToSelect[] = { "red", "green", "yellow" };
page.selectOption("select#favoriteColors", valuesToSelect);
page.locator("input[type=\"submit\"]").click();
String textContent = page.locator("id=result").textContent();
System.out.println(textContent);
}
}
}
Output
Selected colors: red-->green-->yellow
References
https://playwright.dev/docs/api/class-page#page-select-option
No comments:
Post a Comment