인형사 입문🤖

Puppeter는 현재 가장 유명한 헤더 없는 브라우저 자동화 라이브러리일 수 있습니다.그것은 고급 노드를 제공했다.js API를 사용하여 Chrome 또는 Chrome 브라우저 인스턴스에 명령을 시작하고 보낼 수 있습니다.사실은 그 자체가 설치하기 쉽고 사용이 간단하며 성능이 우수하다는 것을 증명한다.

몇몇 배경 이야기📖

인형사의 작업 방식은 DevTools Protocol 위에 얇은 인형을 제공하는 것이다.
DevTools 프로토콜을 사용하면 브라우저의 실제 "Inspect Element"도구 모음에서 모든 멋진 작업을 수행할 수 있습니다.실제로 이 프로토콜은 대부분의 Blink 기반 브라우저(Chrome, Chrome 등)와 같은 기능으로 DOM 검사, 네트워크 분석, 디버깅 및 우리가 접근할 수 있는 모든 멋진 기능을 제공하는 도구입니다.
Puppeter에서는 해커가 아닌 실제 브라우저에서 거의 모든 작업을 수행할 수 있습니다.
Puppeter는 구글 크롬 우산에 속하며 구체적으로는 크롬 개발 도구팀이 관리한다.이 사실 자체가 프로젝트의 장기적인 지속성에 대해 자신감을 가지게 해야 한다.또한 Chrome/Chrome 브라우저에서 제공하는 최신 기능과 일치합니다.특성이 라이브러리에 이식될 때까지 기다릴 필요가 없습니다.
시작합시다!👷

라이브러리 가져오기

우선, 노드가 있는 기계에 있는지 확인하십시오.js>= v10.18.1이 설치되어 있기 때문에 우리는 최신 인형 버전을 사용할 수 있습니다.
Puppeter example이라는 새 프로젝트 폴더를 만들면 전체 과정을 시작할 수 있습니다.

  mkdir puppeteer-example
  cd puppeteer-example

이제 우리는 필요한 노드를 계속 인도할 수 있다.js 설정.

  npm init -y

이 라이브러리가 있으면 가장 좋아하는 라이브러리를 설치할 수 있습니다. 예를 들어 left-pad 또는 browser-redirect 를 설치할 수 있지만, 지금은 건너뛸 수 있습니다.😂. 우리의 목표로 돌아가기:

  npm install puppeteer@4

라이브러리를 설치할 때 컨트롤러에서 Chromium xxx를 다운로드하고 있다는 메시지를 볼 수 있습니다.이 메시지는 Puppeter 라이브러리를 통해 운영체제에 적용되는 특정 버전의 Chromium (node_모듈 내) 을 다운로드하여 Puppeter 설치에 사용할 수 있다는 것을 알기 위한 것입니다.왜냐하면 모든 인형 버전은 그것과 묶인 특정한 크롬 버전과 함께 작업할 수 있기 때문이다.
특별 알림: 디스크 공간이 제한되어 있으면 테스트를 완료하거나 사용하지 않은 Puppeter 프로젝트에서 node\u modules 디렉터리를 삭제하십시오.

처음 만나다🤞

우리는 설치를 마쳤으니, 이제 코드를 작성하기 시작할 수 있다.너는 몇 줄의 코드로 얼마나 많은 일을 완성할 수 있는지 놀랄 수도 있다.
우리의 첫 번째 임무에서 우리는 인형사의 공식 사이트https://pptr.dev/를 탐색할 것이다.
다음을 포함하는 테스트 파일index.js을 만듭니다.

const puppeteer = require("puppeteer");

(async function () {
  const browser = await puppeteer.launch({ headless: false }); // We use this option to go into non-headless mode
  const page = await browser.newPage(); // Create a new page instance
  await page.goto("https://pptr.dev"); // Navigate to the pptr.dev website

  await page.waitFor(5000); // Wait for 5 seconds to see the beautiful site
  await browser.close(); // Close the browser
})();

현재 node test.js 를 사용하여 이 코드를 실행하면 Chromium 실례가 시작되고 pptr로 이동하는 것을 볼 수 있습니다.닫기 전에 dev 사이트를 5초 동안 닫습니다.
나는 현재 이것이 인터넷 자동화 애호가들에게 편안한 곳이라고 확신한다.유일하게 부족한 구성 요소는 실행해야 하는 장면과 Puppeter 홍보에 대한 직관적이고 간단한 API의 느낌입니다.
왜 안 봐요?

간단한 장면을 탐색하다🕵

이 농담을 건너뛰면 pptr가 제공하는 자동 검색 기능을 탐색하는 것이 목표입니다.우리의 편의를 위해서 dev 사이트가 있습니다.

큰소리로 생각하다

따라서 그 목적을 실현하기 위해 실제 사용자가 이 자동 완성 기능을 얻기 위해 무엇을 해야 하는지 설명해 봅시다.
우리는 사용자가
 1. 페이지 열기
 2. 검색 자동 완료 시도
 3. 찾으려는 API 방법에 대한 질의를 입력합니다.
 4. 목록에서 가장 관련된 결과를 클릭
 5. 그가 선택한 항목의 부분을 보고 싶다
인형 API가 주장하는 것처럼 직관적인지 테스트하기 위해서 우리는 이런 생각을 인형 명령으로 계속 바꿀 수 있다.

/* Somewhere else... */
const Homepage = {
  autocompleteSearchInput: "input[type='search']",
};
const apiSearchTerm = "metrics"; // The API method we are looking for
/* ... */

await page.goto("https://pptr.dev");
await page.waitForSelector(Homepage.autocompleteSearchInput);
await page.type(Homepage.autocompleteSearchInput, apiSearchTerm);
await page.click("search-item");

// Find the API name using XPath
const $apiMethod = await page.$x(
  "//api-method-name[text()='" + apiSearchTerm + "']"
)[0];

// Check if this method name section is actually visible on the viewport
const isApiMethodVisible = await $apiMethod.isIntersectingViewport();

assert.equal(isApiMethodVisible, true);

그래, 그렇다고!🎉
위의 코드도 내무 처리를 포함하고 있다. 내가 보기에 우리가 제정한 사고 과정을 바탕으로 하는 것은 매우 간단한 것 같다. 나는 심지어 대부분의 명령의 작용을 설명해야 한다고 생각하지 않는다.이 API는 다른 외부 추상에 의존하지 않고 선명한 언어로 성공적으로 변환되었다.
우리가 한 자리에 설 수 있는 것은 우리가 찾고 있는 API 방법이 브라우저 뷰포트의 명령 조합에 있는지 확인하는 데 쓰인다.이 분야의 경험을 가진 사람들은 이 사실을 단언하려면 사용자 정의 명령 (시구 차원 계산) 을 만들거나 이미 우리를 위해 이루어진 프레임워크 명령에 의존해야 한다는 것을 알고 있다.
이곳의 차이점은 우리가 직접 인형사로부터 얻은 명령이 가장 믿을 만하다고 여겨질 수 있다는 것이다. 단지 플랫폼 자체가 제공하기 때문이다.

한두 가지 물건이 없어졌다🙈

API가 상당히 직관적이고 사용하기 쉽다는 것에 동의한 후에 우리는 개발 체험을 개선하는 데 있어서 누락된 것 같은 것들을 되돌아보고 언급할 수 있다.

1) async 키워드로 코드 채우기

이미 명확하게 관찰한 바와 같이, 코드 주위에 이 비동기적인 키워드를 뿌려야 합니다. 적어도 저에게는 좀 시끄럽습니다.이 키워드는 브라우저 API가 이벤트 구동이기 때문에 필요합니다.JavaScript에서 비동기식과 이벤트 구동 플랫폼을 중심으로 인코딩하는 방법은 Promises 을 사용하여 동작을 모델링하는 것입니다. Puppeter는 바로 이렇게 합니다.
이러한 비동기식 작업의 고통을 줄이기 위해 JavaScript는 언어 문법에 새로운 키워드를 추가했습니다.이 키워드는 코드에서 보신 것입니다async & await.Puppeter의 API는 Promises를 사용해야 하기 때문에 코드를 작성하는 가장 좋은 방법은 대부분의 명령에 대해 이런 비동기적/대기 문법을 사용하는 것이다.

2) 링크가 제공되지 않음

일부 디자인 결정과 라이브러리의 성격 때문에 우리가 위에서 언급한 바와 같이 현재 우리가 칭하는 방법 링크를 지지하지 않는다.이 기능이 있으면 우리의 코드는 더욱 원활해지고 읽기와 이해에 편리하게 변할 수 있다.상상해 보세요.

await page.$("input[type='search']").click().type("metrics").submit();

나는 담보할 수 없지만, 나는 일부 제3자 라이브러리 해결 방안을 시도할 수 있다고 생각한다.상태 및 가능한 외부 솔루션에 대해 자세히 알고 싶으면 관련 GitHubissue를 참조하십시오.

닫다

Puppeter를 설정하고 검색을 자동으로 완성하기 위한 간단한 장면을 작성하는 방법에 대한 빠른 설명을 방금 완성했습니다.지금부터 출시될 모든 식단The Home of Web Automation을 제외하고는 너 자신에게 의지할 수밖에 없다.
내 조언은 자기 용례에 대한 실험을 시작하고 자기 전 이야기로 GitHub에서 찾아보는 것이다detailed API documentation.거의 확실한 것은, 당신은 본 컴퓨터의 명령을 사용할 때 생각하지 못했던 일들을 발견할 수 있을 것이다.
교차 장부 작성The Home of Web Automation
사진 Kevin KuatPexels