Tuesday 21 March 2023

Playwright: tap the element

Locator.tap() method taps the element.

 

Signature

void tap()
void tap(TapOptions options)

 

Example

page.locator("#favoriteColors").locator("option[value=\"red\"]").tap();

 

While working with tap() method, you need to call setHasTouch when creating the context.

 

Find the below working application.

 

tapElement.html
<html>

<body>

  <h1>Tap element 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();
    }

  }
}

TapElementDemo.java

package com.sample.app.locators;

import java.io.File;
import java.io.IOException;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.sample.app.util.FileUtil;

public class TapElementDemo {
  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));
      
      BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().setHasTouch(true));

      final String content = FileUtil.resourceAsString("locators" + File.separator + "tapElement.html");

      Page page = browserContext.newPage();
      page.setContent(content);

      page.locator("#favoriteColors").locator("option[value=\"red\"]").tap();
      page.locator("input[type=\"submit\"]").tap();

      String textContent = page.locator("id=result").textContent();
      System.out.println(textContent);
    }
  }
}

Output

Selected colors: red


Previous                                                 Next                                                 Home

No comments:

Post a Comment