Friday 10 February 2023

Playwright: Fill the input using locator.fill() method

Using Locator.fill() method, fill the input element with given value and trigger an event after filling.

 

‘fill()’ method is available in below overloaded forms.

void fill(String value)
void fill(String value, FillOptions options)

 

If the target element is not an <input>, <textarea> then this method throws an error.

 

Example
page.getByLabel("email").fill("demo@abc.com");
page.locator("input#password").fill("test1234");

 

Find the below working application.

 


registerMe.html

 

<!DOCTYPE html>
<html>

<head> </head>

<body>

  <form onsubmit="return false;">

    <table>
      <tr>
        <td> <label for="email"><b>Email</b></label> </td>
        <td><input type="text" placeholder="Enter your email id" name="email" id="email" required> </td>
      </tr>

      <tr>
        <td> <label for="password"><b>Password</b></label></td>
        <td><input type="password" placeholder="Enter Password" name="password" id="password" required> </td>
      </tr>

      <tr>
        <td> <label for="confirm-password"><b>Repeat Password</b></label> </td>
        <td><input type="password" placeholder="Repeat Password" name=confirm-password" id="confirm-password"
            required></td>
      </tr>

      <tr>
        <td> <input type="submit" value="submit" onclick="display()"></td>
      </tr>


    </table>

  </form>

  <p id="result"></p>

  <script>
    function display() {
      let result = document.getElementById("result");
      let userEmail = document.querySelector('input[id="email"]').value;
      result.innerHTML = `<b>Your email :  ${userEmail} is registered</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();
    }

  }
}

FillTheInput.java

package com.sample.app.actions;

import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

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 FillTheInput {
  private static void printValueBySelector(Page page, String selector, String label) {
    String value1 = page.inputValue(selector);

    System.out.println(label + " : " + value1);
  }

  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 + "registerMe.html");

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

      page.getByLabel("email").fill("demo@abc.com");
      page.locator("input#password").fill("test1234");
      page.locator("input#confirm-password").fill("test1234");

      printValueBySelector(page, "input#email", "email");
      printValueBySelector(page, "input#password", "password");
      printValueBySelector(page, "input#confirm-password", "confirm password");

      TimeUnit.SECONDS.sleep(3);

    }
  }
}

Output

email : demo@abc.com
password : test1234
confirm password : test1234

How to clear the input field or text area?

Pass empty string to the fill method.


 

Previous                                                 Next                                                 Home

No comments:

Post a Comment