web-dev-qa-db-ja.com

AngularアプリケーションでPuppeteerを使用する方法

私の質問は簡単ですが、それが可能かどうか、この場合はどのように可能かわかりませんか？ angularアプリケーションでpuppeteerライブラリを使用したいと思います。 https://www.npmjs.com/package/puppeteer npmインストールです。私はそれを使用する方法を理解していません。たとえば、私はこのスクリプトを作りたいだけです：

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コンポーネントでは、誰かが私を助けることができます（多くのことを理解することができます）

よろしくお願いします、英語が下手ですごめんなさい、私はフランス語です

angulartypescriptprotractorpuppeteere2e-testing
13
Ronaldonizuka

Angular Puppeteerによるe2eテストの使用方法

1）インストール パペット

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

2）Puppeteerを使用するように分度器を構成する

protractor.conf.jsを編集し、capabilities内に次を追加します。

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

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

3）テストを作成して実行する

たとえば、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();
  });
});

ng e2eを使用してe2eテストを実行します。上記の例は、アプリのホームページのスクリーンショットを作成し、example.pngとして保存します。

テストの作成方法の詳細については、 Puppeteerの公式Webサイト を確認してください。

10
Francesco Borzi

あなたが話したこの構成は範囲外です。分度器を操り人形師と一緒に試してみても意味がありません。これらは、まったく異なる2つのアプリケーションです。どちらか一方と一緒に行かなければなりません！

操り人形のGitHubドキュメントに関するQ＆A

https://github.com/GoogleChrome/puppeteer#q-is-puppeteer-replacing-seleniumwebdriver

0
J.Walnut