코어 포인트
Phantomjs는 JavaScript API가있는 헤드리스 웹 키 브라우저이며 DOM 프로세싱, CSS 선택기, JSON, 캔버스 및 SVG를 포함한 다양한 웹 표준을 기본적으로 지원합니다. 기본적으로 GUI가없는 웹 브라우저로 JavaScript를 사용하여 다양한 프로세스를 자동화 할 수 있습니다.
Phantomjs는 Page Automation, 스크린 샷, 테스트 및 네트워크 모니터링과 같은 기능을 제공하는 개발자를위한 강력한 도구입니다. 브라우저를 열지 않고 웹 페이지와의 상호 작용을 허용하고 웹 페이지 스크린 샷을 캡처하고 GUI없이 테스트를 실행하며 네트워크 동작 및 성능을 모니터링 할 수 있습니다.
Phantomjs는 더 복잡하지만 전문가 개발자에게만 적합하지는 않습니다. 연속 통합 시스템에서 사용될 수 있으며 KARMA와 같은 테스트 프레임 워크와 통합 될 수 있으며 웹 페이지 성능에 대한 데이터를 수집하도록 프로그래밍 할 수 있습니다. 문제가 발생할 때 즉시 코드 문제를 감지하고 오류 코드가 프로젝트에 밀리지 않도록하는 것이 특히 적합합니다. -
릴리스 이후 Phantomjs는 많은 JavaScript 엔지니어의 워크 플로우의 중요한 부분이되었습니다. "Headless Webkit and Phantomjs"라는 기사에서 Colin Ihrig는 "Headless Webkit"의 개념을 소개하고 Phantomjs를 간단히 소개합니다. Github에 11,000 개가 넘는 별을 보유한 Phantomjs는 특히 코드를 테스트 할 때 개발자가 선택한 도구가되었습니다. 그러나 진정한 사용에 대한 이해가 부족하기 때문에 많은 개발자들은 여전히 프로젝트 에서이 도구를 구현하지 않아야합니다. 이 격차를 해소하기 위해이 기사는 Phantomjs의 핵심 개념을 설명하고 종종 개발자를 혼란스럽게하는 복잡성을 제거하려고 노력할 것입니다. 이 기사를 읽은 후에는 Phantomjs가 무엇인지, 왜 그런 강력한 도구로 간주되는지를 파헤칠 것입니다. "헤드리스 브라우저 란 무엇입니까?"
Phantomjs 웹 사이트 에서이 기술은 다음과 같이 설명됩니다. & gt; DOM 프로세싱, CSS 선택기, JSON, CANVAS 및 SVG와 같은 다양한 웹 표준에 대한 빠르고 기본 지원이 있습니다. -
분명히, Phantomjs의 새로운 사람들은 이해하기 어려운 용어를 발견 할 수 있습니다. 이 설명은 야심 찬 개발자를 압도하고 이러한 기술에 익숙하지 않은 사람들이 매우 전문적인 개발자에게만 효과가 있다고 생각할 수 있습니다. 그러나 이러한 개념이 이해하기 쉽다는 것을 확신 할 수 있습니다. Phantomjs는 스크립트에만 존재하는 웹 브라우저입니다. GUI는 없지만 JavaScript를 사용하여 다른 프로세스를 자동화 할 수있는 헤드리스 브라우저가 있습니다. 이 도구의 이점을 상자에서 살펴 보겠습니다. 주제를 설명하기 전에 Phantomjs를 설치하지 않은 경우 컴퓨터에 설치하는 것이 좋습니다. 다음 명령을 실행하여 CLI의 NPM을 통해 설치할 수 있습니다.
npm 설치 phantomjs -g
<code>
安装完成后，您就可以访问phantomjs命令。PhantomJS核心概念
-----------------------
让我们深入了解其核心概念。### 页面自动化
PhantomJS允许开发人员访问浏览器的DOM API。毕竟，即使PhantomJS没有GUI，它仍然是一个浏览器。开发人员可以编写将在指定页面上评估的JavaScript代码。虽然这似乎并不重要，但这允许我们自动化与网页的任何类型的交互，而无需打开浏览器（这将节省您大量时间）。这在使用PhantomJS运行测试时尤其有用，我们很快就会看到更多相关内容。现在，让我们看一下项目网站中的以下示例。它显示了如何使用evaluate()函数从页面返回不同的对象。在本例中，evaluate()用于返回ID为myagent的元素的textContext属性。要启动此示例，我们只需在命令行中运行名为phantomjs userAgent.js的文件，我们将在控制台中收到结果。```
//userAgent.js
var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function(status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
var ua = page.evaluate(function() {
return document.getElementById('myagent').textContent;
});
console.log(ua);
}
phantom.exit();
});</code>로그인 후 복사
스크린 샷 https://www.php.cn/link/b93df0dce7fb0fcf484c0eceda9b816c
', function () {
page.render ( 'github.png');
phantom.exit ();
});
테스트
phantomjs는 개발자가 GUI없이 테스트를 실행하는 프로세스를 자동화 할 수 있도록 도와줍니다. Phantomjs는 헤드리스 브라우저를 사용하여 다양한 장치 테스트를 처리하고 명령 줄을 사용하여 개발자에게 오류가 발생하는 위치를 알려줍니다. Phantomjs는 주로 테스트에서 사용하는 것으로 알려져 있습니다. 개발에서 Phantomjs는 Karma와 같은 다른 테스트 프레임 워크를 시작하는 데 사용됩니다. 헤드리스 테스트에 대한 문서 페이지에 액세스하면 Phantomjs를 지원하기 위해 어떤 프레임 워크가 구축되었는지, Phantomjs 러너 Qunit 플러그인과 같은 외부 테스트 러너를 통해 액세스 할 수있는 프레임 워크 목록을 확인할 수 있습니다. Phantomjs는 지속적인 통합 시스템에도 사용됩니다. 지속적인 통합 프로세스에 익숙하지 않은 사람들에게는 모니터링 응용 프로그램을 처리합니다. 개발자는 Phantomjs를 Travis CI와 같은 CI 시스템과 통합하여 실제로 코드를 푸시하기 전에 프로젝트에 추가 된 새로운 코드에서 테스트를 실행할 수 있습니다. 결과적으로 개발자는 문제가 발생할 때 즉시 코드 문제를 감지하여 문제를 해결하여 오류 코드가 프로젝트에 밀리지 않도록합니다. 네트워크 모니터링
Phantomjs의 또 다른 핵심 기능은 네트워크 연결을 모니터링하는 기능입니다. 문서에 정의 된 바와 같이 : & gt; Phantomjs는 네트워크 트래픽을 검사 할 수 있기 때문에 다양한 네트워크 행동 및 성능을 구축하는 데 적합합니다.
이는 Phantomjs가 웹 페이지 성능에 대한 다른 데이터를 수집하도록 프로그래밍 될 수 있음을 의미합니다. Phantomjs와 쌍을 이룰 때 Yslow는 다른 형식 (예 : TAP)을 사용하여 이러한 테스트 결과를 출력 할 수 있습니다. 구현 후 TAP는 단위 테스트와 테스트 도구 (이 경우 Phantomjs) 간의 통신을 허용합니다. 또한 Phantomjs 및 Yslow는 연속 통합 시스템에서 TAP 프로토콜을 사용하고 프로젝트에 추가 된 새 코드의 성능을 모니터링합니다. 이러한 방식으로 개발자에게 코드를 푸시하기 전에 성능 회귀를 알릴 수 있습니다. 결론 <.>
희망적으로, Phantomjs가 무엇인지, 그것이 어떻게 작동하는지, 얼마나 강력한 지에 대한 명확한 이해를 얻었습니다. Phantomjs 및 일반 테스트에 익숙하지 않고 이러한 주제에 대해 더 많이 배우고 싶다면 매우 유용한 몇 가지 리소스가 있습니다 .- Phantomjs 및 Casperjs 소개
PhantomJS还允许开发人员调整这些截图的大小，并指定我们想要捕获的确切区域。下面，我们可以看到一个示例，它只是上面显示的github.js脚本的修改版本。```
var page = require('webpage').create();
//viewportSize是无头浏览器的实际大小
page.viewportSize = { width: 1024, height: 768 };
//clipRect是您正在截图的页面部分
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//其余代码与之前的示例相同
page.open('http://example.com/', function() {
page.render('github.png');
phantom.exit();
});.
자동화에 Phantomjs를 사용하십시오
Phantomjs 및 Casperjs를 사용한 웹 크롤링 및 자동화
jQuery, phantomjs 및 노드
-
이 기사를 즐겼기를 바랍니다. 질문이나 질문이 있으시면 아래 섹션에서 자유롭게 의견을 제시하십시오. Phantomjs (FAQ)에 대한 자주 묻는 질문
Phantomjs의 주요 목적은 무엇입니까?
Phantomjs는 웹 상호 작용을 자동화하는 데 사용되는 스크립트 가능한 헤드리스 브라우저입니다. 자동 탐색, 스크린 샷, 사용자 행동 및 어설 션을 가능하게하는 JavaScript API를 제공하여 웹 사이트 테스트에 적합한 도구입니다. 또한 서버 측에서 웹 페이지를 작동 및 렌더링 할 수있게되므로 웹 크롤링, 페이지 렌더링 및 웹 페이지 의미론 이해에 매우 유용합니다. -
Phantomjs는 다른 헤드리스 브라우저와 어떻게 다릅니 까?
다른 헤드리스 브라우저와 달리 Phantomjs는 DOM 프로세싱, CSS 선택기, JSON, CANVAS 및 SVG와 같은 다양한 웹 표준을 기본적으로 지원할 수 있습니다. 또한 웹 캡처를 지원하며 웹 사이트 스크린 샷 또는 PDF를 생성하는 데 매우 유용합니다. Phantomjs는 다양한 웹 표준에 대한 빠르고 기본적인 지원으로 유명합니다. -
Phantomjs는 웹 크롤링에 적합합니까?
예, Phantomjs는 웹 크롤링을위한 훌륭한 도구입니다. 인간 사용자와 같은 웹 페이지를 렌더링하고 이해할 수 있지만 프로세스를 자동화 할 수 있다는 이점이 있습니다. 이를 통해 웹 사이트, 특히 JavaScript에 크게 의존하는 웹 사이트에서 정보를 추출하는 강력한 도구가됩니다.
Phantomjs를 사용하여 모바일 웹 사이트를 테스트 할 수 있습니까?
예, Phantomjs는 모바일 웹 사이트를 테스트하는 데 사용할 수있는 다양한 도구입니다. 이를 통해 개발자는 다양한 화면 크기와 해상도를 시뮬레이션하여 다른 장치에서 웹 사이트의 모양과 기능을 테스트 할 수 있습니다.
Phantomjs는 JavaScript를 어떻게 처리합니까?
Phantomjs는 우수한 JavaScript 처리 기능을 가지고 있습니다. 복잡한 JavaScript 기능을 실행하고 JavaScript에 크게 의존하는 웹 페이지를 렌더링 할 수도 있습니다. 따라서 동적 웹 페이지를 테스트하기위한 강력한 도구가됩니다.
Phantomjs는 웹 페이지 스크린 샷을 캡처 할 수 있습니까?
예, Phantomjs의 주요 기능 중 하나는 웹 페이지의 스크린 샷을 캡처하는 기능입니다. 이것은 레이아웃, 디자인 및 반응 형 동작과 같은 웹 사이트의 시각적 측면을 테스트하는 데 특히 유용합니다.
Phantomjs는 지속적인 통합 시스템에 적합합니까?
예, Phantomjs는 지속적인 통합 시스템을 위해 설계되었습니다. 헤드리스 기능은 다른 프로세스를 방해하지 않고 백그라운드에서 테스트를 실행하는 데 이상적입니다.
Phantomjs는 웹 표준을 어떻게 지원합니까?
Phantomjs는 DOM 프로세싱, CSS 선택기, JSON, CANVAS 및 SVG를 포함한 다양한 웹 표준을 기본적으로 지원합니다. 즉, 인간 사용자와 같이 웹 페이지와 정확하게 웹 페이지를 렌더링하고 상호 작용할 수 있습니다.
phantomjs는 pdf를 렌더링 할 수 있습니까?
예, Phantomjs는 PDFS를 렌더링 할 수 있습니다. 이는 인쇄용 버전의 웹 페이지를 생성하거나 문서 작성에 유용합니다.
Phantomjs 오픈 소스입니까?
예, Phantomjs는 오픈 소스 프로젝트입니다. 이는 소스 코드가 자유롭게보기, 수정 및 배포 할 수 있음을 의미합니다. 이는 또한 소프트웨어를 개선하고 새로운 기능을 추가하기 위해 협력하는 거대한 개발자 커뮤니티의 기여로부터 이점을 제공합니다.
위 내용은 유령 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
