Angular 응용 프로그램에서 Puppeteer를 사용하는 방법

Angular 응용 프로그램에서 Puppeteer를 사용하는 방법

제 질문은 간단하지만 가능한지, 이 경우 어떻게 가능한지 이해가 안 됩니다.

npm 패키지를 이용하여 Angular 어플리케이션에서 라이브러리를 사용하고 싶은데 어떻게 사용하는지 이해가 안 됩니다.

예를 들어 다음 스크립트를 만들고 싶습니다.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Angular 구성 요소에서 누군가 나를 도와줄 수 있습니까(많은 것을 이해할 수 있을 것입니다).

미리 감사드립니다, 제가 영어를 잘 못해서 죄송합니다, 저는 프랑스인입니다.

Puppeteer에서 Angular e2e 테스트를 사용하는 방법

Puppeteer 설치

npm install --save-dev puppeteer @types/puppeteer

Puppeteer를 사용하도록 Protractor 구성

편집하기protractor.conf.js그리고 내부에 다음을 추가합니다.capabilities:

// ...
const puppeteer = require('puppeteer');

exports.config = {
  // ...
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless'],
      binary: puppeteer.executablePath(),
    },
  },
  // ...
};

테스트 작성 및 실행

예를 들어, 다음을 편집합니다.e2e/src/app.e2e-spec.ts다음을 수행합니다.

import * as puppeteer from 'puppeteer';

describe('workspace-project App', () => {
  it('Test Puppeteer screenshot', async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://localhost:4200');
    await page.screenshot({ path: 'example.png' });

    await browser.close();
  });
});

다음을 사용하여 e2e 테스트 실행ng e2e위의 예는 당신의 앱 홈 페이지의 스크린샷을 생성하고 그것을 저장합니다.example.png.

---

테스트 작성 방법에 대한 자세한 내용은 Puppeteer 공식 웹 사이트를 확인하십시오.

Puppeteer를 Angular Universal의 최신 스마트 대안으로 사용하여 서버 측 렌더링 및 사전 렌더링을 수행할 수 있습니다.이 목적으로 Puppeteer를 사용할 때 Angular Universal과 달리 프로젝트 소스 코드를 수정할 필요가 없습니다.Puppeteer를 사용하는 것은 Universal보다 훨씬 쉬워 보입니다.

참조:

헤드리스 크롬: 서버측 렌더링 JS 사이트에 대한 답변

@angular/cli 및 puppeteer를 사용하여 Angular 응용 프로그램 미리 렌더링

언급URL : https://stackoverflow.com/questions/51536244/how-to-use-puppeteer-in-an-angular-application