헤드리스 웹 키트 및 팬텀즈

코어 포인트

Phantomjs, WebKit 기반 헤드리스 브라우저 인 Phantomjs는 그래픽 사용자 인터페이스없이 웹 페이지의 더 빠른 프로그램 자동화 및 테스트를 허용합니다.

Phantomjs는 JavaScript를 통해 페이지와 상호 작용하는 기능과 같은 강력한 기능을 제공하여 버튼 클릭, 양식 제출 및 표준 DOM API 또는 JQuery와 같은 라이브러리를 사용하여 웹 페이지를로드 및 조작하는 것과 같은 작업을 쉽게 자동화 할 수 있습니다.

phantomjs는 응용 프로그램이 소스 코드를 파일 시스템에 저장하고 웹 페이지의 스크린 샷을 찍고 외부 스크립트 파일을 페이지에 포함시킬 수있는 광범위한 파일 시스템 API를 제공합니다.
• Phantomjs는 강력하지만 Node.js와 매우 통합되지는 않습니다.
• 이 ​​기사를 읽고 있다면 브라우저가 무엇인지 알 수 있습니다. 이제 GUI를 제거하면 소위
헤드리스 브라우저 를 얻습니다. 헤드리스 브라우저는 일반 브라우저와 동일한 작업을 수행 할 수 있지만 더 빠릅니다. 프로그래밍 방식으로 웹 페이지를 자동화하고 테스트하는 데 적합합니다. 현재 헤드리스 브라우저가 많이 있으며 Phantomjs가 가장 좋습니다. Chrome과 Safari의 엔진 인 Webkit을 기반으로하는 Phantomjs는 부피가 큰 GUI가 필요없이 강력한 브라우저 기능을 제공합니다. Phantomjs를 시작하는 것은 쉽습니다. 실행 파일을 다운로드하기 만하면됩니다. 다음으로 hello.js라는 파일을 만들고 다음 줄의 코드를 추가하십시오.
• 스크립트를 실행하려면 다음 명령을 실행하십시오. Phantomjs 실행 파일은 현재 디렉토리 또는 환경 경로 어딘가에 있어야합니다. 모든 것이 올바르게 구성되면 Phantomjs는 "Hello World!"를 인쇄하고 Phantom.exit ()가 호출 될 때 종료됩니다.
• 웹 페이지 를 사용합니다 Phantomjs가 실행되면 웹을 자동화 할 수 있습니다. 다음 예제는 Google 홈페이지를로드하고 스크린 샷을 파일에 저장합니다. 1 행은 웹 페이지의 새로운 인스턴스를 만듭니다. Line 4는 Google.com을로드합니다. 페이지가로드되면 onloadfinished () 콜백 함수가 실행됩니다. 콜백 함수는 단일 매개 변수 상태를 수신하여 페이지가 성공적으로로드되었는지 여부를 나타냅니다. 페이지를로드 할 URL은 page.url에서 사용할 수 있습니다. 이 속성은 페이지에 리디렉션이 포함되어있을 때 특히 유용하며 귀하가 어디에 있는지 정확히 알고 싶습니다. Line 8은 페이지의 Render () 메소드를 사용하여 스크린 샷을 찍습니다. Render ()는 PNG, GIF, JPEG 및 PDF 파일을 생성 할 수 있습니다.

console.log("Hello World!");
phantom.exit();

페이지 설정 페이지 객체의 많은 설정은 응용 프로그램의 요구에 따라 사용자 정의 할 수 있습니다. 예를 들어 소스 코드 다운로드에만 관심이있는 경우 이미지 파일을 무시하고 JavaScript를 닫아 응용 프로그램 속도를 높일 수 있습니다. 다음 다시 쓰기 예제는 이러한 변경 사항을 반영합니다. 변경된 설정은 3 행 및 4 행에 표시됩니다. Open ()을 호출하기 전에 모든 설정 변경이 이루어져야합니다. 이 예제의 스크린 샷을 보면 Google 로고 이미지가 누락되었지만 나머지 페이지는 동일하게 유지됩니다.

파일 시스템에 액세스

지금까지,이 예제는 페이지를로드하고 스크린 샷을 이미지 파일로 저장했습니다. 의심 할 여지없이 멋지지만 많은 응용 프로그램이 소스 코드를 파일 시스템에 저장하는 것을 선호합니다. Phantomjs는 광범위한 파일 시스템 API를 제공하여이를 수행합니다. 다음 예제는 FileSystem 모듈을 사용하여 Google.com 소스 코드를 파일에 작성합니다. 먼저 2 행에서 파일 시스템 모듈을 가져옵니다. 6 행에서는 출력 파일을 엽니 다. 7 행에서 write () 메소드를 사용하여 데이터를 파일에 씁니다. 실제 소스 코드는 페이지의 컨텐츠 속성을 통해 얻을 수 있습니다. 마지막으로 파일을 닫고 Phantomjs를 종료하십시오.

phantomjs hello.js

JavaScript를 실행하십시오 Phantomjs의 가장 강력한 특징 중 하나는 JavaScript를 통해 페이지와 상호 작용하는 기능입니다. 따라서 버튼을 클릭하거나 양식을 제출하는 것과 같은 작업을 자동화하기가 매우 쉽습니다. 다음 예제는 Google 홈페이지를로드하고 쿼리를 입력하고 검색 양식을 제출하여 웹 검색을 수행합니다. 예제의 시작은 익숙해 보일 것입니다. 새로운 컨텐츠는 8 행에서 시작하여로드 된 페이지가 결정됩니다. 이것이 홈페이지 인 경우 페이지의 evalue () 메소드가 호출됩니다. 평가 () 페이지의 맥락에서 제공하는 코드를 실행합니다. 이것은 실제로 페이지의 원래 개발자와 동일한 권한을 제공합니다. 이게 얼마나 멋진가요?

내부 평가 () 검색 상자와 양식을 찾습니다. 검색 창의 값을 "JSPRO"로 설정하고 양식을 제출합니다. 이로 인해 페이지의 onloadfinished () 메소드가 다시 시작됩니다. 그러나 이번에는 검색 결과의 스크린 샷이 발생하고 Phantomjs가 종료됩니다. Phantomjs는 또한 js () 및 injectjs ()를 포함한 두 가지 방법을 제공하므로 외부 스크립트 파일을 페이지에 추가 할 수 있습니다. includejs ()는 페이지에서 액세스 할 수있는 스크립트 파일을 포함하는 데 사용됩니다. 예를 들어, 다음 코드를 사용하여 이전 예제에 jQuery를 포함시킬 수 있습니다. 9 행에서 includejs ()를 호출하고 evaluate () 내부의 jQuery 구문을 참고하십시오.

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};

injectjs () 메소드는 포함 js ()와 유사합니다. 차이점은 주입 된 스크립트 파일에 페이지 객체에서 액세스 할 필요가 없다는 것입니다. 예를 들어, 로컬 파일 시스템에서 스크립트를 주입 할 수 있습니다. phantomjs and node.js

불행히도, Phantomjs는 node.js와 통합되지 않았습니다. 일부 프로젝트는 node.js에서 phantomjs를 제어하기 위해 만들어졌지만 모두 서투른 것입니다. 기존 프로젝트는 아동 프로세스 모듈을 사용하여 Phantomjs 인스턴스를 생성합니다. 다음으로 Phantomjs는 Websockets를 사용하여 Node.js와 통신하는 특수 웹 페이지를로드합니다. 이상적이지는 않지만 작동합니다. 두 개의 더 인기있는 phantomjs 노드 모듈은 Node-phantom 및 phantomjs-node입니다. 최근에 Ghostbuster라는 고유 한 Phantomjs 노드 모듈을 개발하기 시작했습니다. Ghostbuster는 Node-Phantom과 유사하지만보다 강력한 명령을 제공하여 콜백 중첩을 줄이려고합니다. Phantomjs에 대한 전화가 적을수록 Websockets에서 의사 소통을 낭비하는 시간이 줄어 듭니다. 또 다른 옵션은 JSDOM을 구축 한 가벼운 헤드리스 브라우저 인 Zombie.js입니다. 좀비는 phantomjs만큼 강력하지는 않지만 실제 node.js 모듈입니다.

결론

이 기사를 읽은 후에는 Phantomjs에 대한 기본적인 이해가 있어야합니다. Phantomjs의 가장 좋은 기능 중 하나는 사용 편의성입니다. 이미 JavaScript에 익숙하다면 학습 곡선이 작습니다. Phantomjs는 또한이 기사에서 다루지 않은 다양한 다른 기능을 지원합니다. 언제나 그렇듯이 문서를 보는 것이 좋습니다. Phantomjs의 전체 기능을 보여주는 몇 가지 예가 있습니다! 헤드리스 웹 키트 및 팬 토즈에 대한 FAQS
헤드리스 웹 키트와 팬텀 즈의 주요 차이점은 무엇입니까?
Headless WebKit 및 Phantomjs는 둘 다 웹 브라우저를 자동화하는 도구입니다. 그러나 주요 차이점은 기능입니다. Headless WebKit은 그래픽 사용자 인터페이스가없는 브라우저로 자동화, 테스트 및 서버 측 렌더링을 위해 프로그래밍 방식으로 제어 할 수 있습니다. 반면에 Phantomjs는 웹 상호 작용을 자동화하기위한 스크립트 가능한 헤드리스 브라우저로 자동화 된 내비게이션, 스크린 샷, 사용자 행동 및 어설 션을 지원하는 JavaScript API를 제공합니다.

Phantomjs는 여전히 유지됩니까? 2018 년 3 월 현재 Phantomjs는 더 이상 적극적으로 유지되지 않았습니다. 주된 이유는 Chrome 헤드리스 브라우저 및 Firefox 헤드리스 브라우저와 같은 최신 헤드리스 브라우저의 출현으로 더 많은 기능과 더 나은 지원을 제공하기 때문입니다. Phantomjs에 대한 대안은 무엇입니까?

Phantomjs는 더 이상 유지되지 않기 때문에 일부 대안이 나타납니다. 여기에는 DevTools 프로토콜을 통해 크롬 또는 크롬을 제어하기위한 고급 API를 제공하는 노드 라이브러리 인 Puppeteer와 웹 애플리케이션의 자동 테스트를위한 오픈 소스 컬렉션 인 Selenium Webdriver가 포함됩니다.

Phantomjs는 어떻게 작동합니까?

Phantomjs는 자동화 된 내비게이션, 스크린 샷, 사용자 동작 및 어설 션을 지원하는 JavaScript API를 제공하여 작동합니다. JavaScript API를 사용하는 스크립트 가능한 헤드리스 웹 키트입니다. DOM 프로세싱, CSS 선택기, JSON, CANVAS 및 SVG와 같은 다양한 웹 표준에 대한 빠르고 기본 지원이 있습니다.

웹 크롤링에 Phantomjs를 사용할 수 있습니까?

예, Phantomjs는 웹 크롤링에 사용될 수 있습니다. 표준 DOM API 또는 JQuery와 같은 일반적인 라이브러리를 사용하여 웹 페이지를로드 및 조작 할 수 있습니다.

phantomjs를 설치하는 방법은 무엇입니까?

Phantomjs는 NPM (Node Package Manager)을 통해 설치할 수 있습니다. 터미널 또는 명령 프롬프트에서 "npm install phantomjs"명령을 사용할 수 있습니다.

서버 측 렌더링에서 헤드리스 웹 키트의 역할은 무엇입니까?

Headless WebKit은 서버가 JavaScript 렌더링 된 페이지를 사전 렌더링하고 HTML로 변환 한 다음 클라이언트로 보낼 수 있도록 서버 측 렌더링에서 중요한 역할을합니다. 웹 응용 프로그램의 성능과 SEO가 향상됩니다.

자동 테스트에 헤드리스 웹 키트를 사용할 수 있습니까?

예, 헤드리스 웹 키트는 자동 테스트를위한 훌륭한 도구입니다. 눈에 보이는 UI없이 실제 브라우저 환경에서 테스트를 실행할 수 있습니다.

헤드리스 웹 키트를 설치하는 방법은 무엇입니까?

헤드리스 웹 키트의 설치 프로세스는 사용하는 특정 도구에 따라 다릅니다. 예를 들어, 인형극을 사용하는 경우 "NPM 설치 인형극"명령을 사용하여 NPM을 통해 설치할 수 있습니다.

기존 자동 브라우저와 비교하여 헤드리스 웹 키트를 사용하면 어떤 장점이 있습니까?

Headless Webkit은 자동화의 기존 브라우저에 비해 몇 가지 장점이 있습니다. 시각을 렌더링하는 데 시간이 걸리지 않기 때문에 더 빠릅니다. 또한 자동화 된 스크립트 브라우징이 가능하며 테스트 및 웹 크롤링에 매우 유용합니다.

위 내용은 헤드리스 웹 키트 및 팬텀즈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!