이 기사는 Selenium/Appium Advent Calendar 2018의 15 일째 기사입니다.

안녕하세요!
그래, 슬슬 재료 조각입니다.
좋아, 잘 부탁드립니다! ! !

처리

미디어 아트 방면의 사람에게는 친숙한, 가트라고 써 구워트와 움직이는 녀석입니다.
Web계의 사람에게는 Processing.js 이나, 후계의 p5.js 쪽이 친숙할지도 모르겠네요. 그것의 기초가 된 사람입니다.

Processing은 Java 호환의 프레임워크이므로, 개발 환경인 PDE 에 소정의 설정을 하는 것만으로도 통상으로 Selenium의 Java판 클라이언트를 사용할 수 있게 됩니다.

실제로 해보자.

준비

Selenium 공식 다운로드 페이지 에서 Java 버전의 클라이언트 라이브러리 세트를 다운로드하십시오. 이 기사에서는 버전 3.141.59를 사용합니다.
다운로드가 끝나면 모든 jar 파일을 라이브러리 폴더에 넣습니다. macOS의 경우 /Users/[自分のホームディレクトリー]/Documents/Processing3 가 PDE의 설정 디렉토리에 있다고 생각합니다. 그 아래의 libraries 아래에 selenium 그리고 그 아래에 library 와 디렉토리를 만들고 그 안에 jar 파일을 모두 넣습니다.



그런 다음 가져오고 사용하는 클라이언트 라이브러리의 파일 이름을 변경하여 libraries 바로 아래의 디렉토리 이름 selenium와 일치시킵니다. 이렇게 하지 않으면 PDE에서 클라이언트 라이브러리를 가져올 수 없습니다.



지금까지 가능하면 PDE를 시작합시다. Selenium 클라이언트를 사용할 수 있습니다.

샘플 코드

대략적으로는 다음 샘플과 같은 코드를 PDE에 쓸 수 있습니다.
아마도 Processing에서 Selenium을 사용할 때 실시간으로 얻은 브라우저의 스크린 샷 이미지를 처리하지 않거나 표시하지 않을까요?

import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

WebDriver driver;
PImage pngImage;

void setup()
{
  frameRate(15);
  ChromeOptions options = new ChromeOptions();
  options.setHeadless(true);
  driver = new ChromeDriver(options);
}

void dispose()
{
  driver.quit();
  println("disposed.");
}

void draw()
{
  background(0);
  if (pngImage != null)
  {
    image(pngImage, 0, 0);
  }

  if (frameCount % frameRate == 1)
  {
    thread("getScreenshotFromThread");
  }
}

void getScreenshotFromThread()
{
  driver.get("http://example.selenium.jp/reserveApp/");
  File pngFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
  pngImage = loadImage(pngFile.getAbsolutePath());
}

Processing에서 이용할 때 주의하는 포인트는 다음과 같을 것입니다.

dispose() 를 반드시 쓰고 Sketch가 끝날 때 브라우저와 브라우저 드라이버를 반드시 종료하십시오.

다만, Processing으로 쓴 Sketch는 흔히 동작 불안정하고, dispose() 불가능하게 종료해 버리는 일도 있습니다. 개발 중에는 정기적으로 브라우저와 브라우저 드라이버의 나머지 과정을 killall 등으로 청소합시다.

WebDriver.get() 이나 TakesScreenshot.getScreenshotAs() 를 draw() 에서 실행해 버리면, 1 프레임의 실행에 걸리는 시간이 현격히 늘어나 버려, 제대로 그릴 수 없게 됩니다. thread() 등을 이용해, 다른 thread내에서 실행하도록(듯이) 합시다.

정말 TakesScreenshot.getScreenshotAs() 의 결과는 byte[] 에서 받고 싶은 곳입니다만, Processing의 API 범위에서는 PNG 이미지의 바이트열을 간단하게 비트맵에 전개할 수 없습니다. 오버헤드는 매우 신경이 쓰입니다만, 한 번 파일에 출력해 loadImage() 하는 편이 심플한 코드를 쓸 수 있을 것입니다.

글리치 이미지를 만들고 싶다면 byte[]

이번에는 여기까지

다음 번은 ... 누군가! 누군가 와줘! ! !
Selenium/Appium Advent Calendar 2018은 여전히 ​​당신의 도전을 기다리고 있습니다!