Puppeteer를 사용하여 웹 페이지의 이미지 차이를 만듭니다.

10290 단어 자바스크립트puppeteerNode.js
브라우저 자동화를 사용하여 두 웹 페이지의 차이 이미지를 만듭니다. JavaScript 라이브러리만을 사용하여 이를 실현합니다.

라이브러리 설치



헤드리스 Chrome (Chromium)을 제어하는 ​​라이브러리 Puppeteer을 사용합니다.
yarn 또는 npm을 사용하여 Puppeteer 및 기타 필요한 라이브러리를 설치합니다.
$ mkdir my-project
$ cd my-project
$ yarn init # or npm init
$ yarn add puppeteer looks-same # or npm install puppeteer looks-same

looks-same 은 두 이미지를 비교하여 동일한 이미지인지 여부를 결정하거나 차이 이미지를 생성할 수 있는 라이브러리입니다.

여기에서는 프로그램을 작성하기 전에 생성할 이미지를 저장하는 디렉토리를 작성합니다.
$ mkdir dist

Puppeteer를 제어하는 ​​JavaScript 만들기



Puppetter API를 사용하여 브라우저를 제어하는 ​​프로그램을 만듭니다. 여기서는 URL_A 와 URL_B 라는 변수 이름으로 비교할 두 개의 웹 페이지를 지정합니다.
작성하는 프로그램에서는 다음의 조작을 실시합니다.
  • 헤드리스 Chrome 시작
  • URL_A로 전환
  • URL_A의 스크린 샷 만들기
  • URL_B로 전환
  • URL_B의 스크린 샷 만들기
  • 만든 두 개의 스크린 샷에서 차등 이미지 생성 
    • // index.js
const puppeteer = require('puppeteer')
const looksSame = require('looks-same')

const URL_A = 'https://example.com/a'
const URL_B = 'https://example.com/b'

;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setViewport({ width: 512, height: 100 })

  const pathA = 'dist/a.png'
  const pathB = 'dist/b.png'
  const pathDiff = 'dist/diff.png'
  await page.goto(URL_A)
  await page.screenshot({ path: pathA })
  await page.goto(URL_B)
  await page.screenshot({ path: pathB })

  await new Promise((resolve, reject) =>
    looksSame.createDiff(
      {
        reference: pathA,
        current: pathB,
        diff: pathDiff,
        highlightColor: '#ff00ff'
      },
      error => (error ? reject() : resolve())
    )
  )

  await browser.close()
})()

    프로그램을 실행합니다.
    $ node index.js

    프로그램을 실행하면 dist 디렉토리 안에 스크린샷과 그 차이가 생성되고 있는 것을 알 수 있습니다. 또한 이미지의 다른 부분은 분홍색(#ff00ff)으로 강조 표시됩니다.

    실제 예



    다음과 같이 미묘하게 내용이 다른 두 개의 웹 페이지 스크린샷의 차이 이미지를 실제로 만들어 봅니다.
    <!-- a.html -->
<!DOCTYPE html>
<html>
  <body>
    <h1 class="title">Helloo!</h1>
    <p class="content">This is page A!</p>
  </body>
</html>

    <!-- b.html -->
<!DOCTYPE html>
<html>
  <body>
    <h1 class="title">Hello!</h1>
    <p class="content">This is page B!</p>
  </body>
</html>

    텍스트의 차이는 이런 느낌.
    $ diff a.html b.html
1c1
< <!-- a.html -->
---
> <!-- b.html -->
5,6c5,6
<     <h1 class="title">Helloo!</h1>
<     <p class="content">This is page A!</p>
---
>     <h1 class="title">Hello!</h1>
>     <p class="content">This is page B!</p>

    앞의 프로그램에 하드 코드된 URL을 적절하게 변경합니다.
    별도의 웹 서버를 시작하는 등 위의 HTML에 아래의 URL로 액세스할 수 있도록 해 주세요.
    // index.js
// ...
const URL_A = 'http://127.0.0.1:8080/a.html'
const URL_B = 'http://127.0.0.1:8080/b.html'
// ...

    프로그램을 실행합니다.
    node index.js

    다음과 같이 이미지가 생성됩니다.

    a.png


    b.png


    차이 이미지


    요약



    Node.js를 사용하여 두 웹 페이지의 스크린 샷의 차이 이미지를 만들고 콘텐츠의 차이와 스타일의 차이 등을 감지 할 수 있습니다. Production 과 개발 환경 사이에 어떤 외형의 변화가 발생하고 있는지를 가시화하거나, CI 등으로 돌려 채팅 툴에 차분 화상을 포스트하는 등도 간단하게 할 수 있을 것 같네요.
    웹에서 가사를 자동으로 가져옵니다.
    한 줄로 웹사이트를 스크래핑하여 JSON화할 수 있는 명령을 만들었다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage