각도기로 캔버스 그리기 테스트 (1)

Protractor는 Angular 갱에서 개발한 e2e 테스트 프레임워크로 기본적으로 webdriver를 사용합니다.

캔버스 테스트는 주로 이미지를 비교하는 작업인데, 검색해보니 좋은 nodejs 라이브러리를 찾을 수 없어서 예전에 사용하던 Likejs를 계속 사용했습니다.

resemblejs는 Image와 Canvas를 사용하기 때문에 nodejs에서 바로 사용할 수 없습니다.

github의 누군가가 node-resemble을 만들었지만 C로 작성된 node-canvas를 사용했습니다. 이를 컴파일하려면 python 및 vc 런타임 라이브러리를 설치해야 합니다. 매우 번거로운 것 같습니다. 단 2개입니다. 별.

like를 브라우저에서 직접 실행시켜도 괜찮지 않을까요?

이를 위해서는 브라우저의 excuteAsyncScript 메소드를 사용해야 합니다.

먼저 ExecutionAsyncScript에 대해 알아보겠습니다

이 방법은 js 코드를 브라우저 환경, 즉 브라우저 환경에서 실행하는 방법으로, 모든 DOM을 사용할 수 있습니다. , Canvas, 모든 것이 당연합니다.

그리고 실제로 비슷한 사용법을 가진 동기식 실행 스크립트가 있습니다.

API는 올리지 않고 사용법만 이야기하겠습니다.

executeAsyncScript 메소드는 가변 매개변수 메소드입니다.

첫 번째 매개변수는 브라우저에서 실행될 코드인 메소드여야 합니다.

예:

function(){
    console.log("我是一个方法");
};

그런 다음 나중에 원하는 수의 매개변수를 작성할 수 있으며 첫 번째 매개변수 방법에서는 인수 배열을 사용하여 가져올 수 있습니다.

예:

function(){

console.log("我是一个方法，我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
};

비동기적이므로 실행 결과를 콜백 함수로 반환해야 합니다. 이 콜백 함수 웹드라이버는 이미 준비되어 있습니다. , 이는 마지막 매개변수입니다.

따라서 첫 번째 매개변수의 전체 모양은

function(){
    console.log("我是一个方法，我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
    var callback=arguments[arguments.lenght-1];
    callback("返回");
};

executeAsyncScript 메서드의 반환 값은 약속입니다

그래서 전체 함수는 call should be 이는

browser.executeAsyncScript("function(){console.log("前面写过了我就不写了")}",p1,p2,p3)

rrree

then 메소드의 콜백 결과입니다.

각도기를 사용하지 않고 웹드라이버만 사용하는 경우에도 마찬가지입니다.

글쎄, 오랫동안 글을 써도 본론에 도달하지 못해서 일단 이쯤 하고 다음 글에 쓰겠습니다.

위 내용은 각도기를 사용하여 캔버스 그리기를 테스트하는 내용입니다(1). 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!