어떻게 극작가의 서류를 다운로드합니까?

본고에서 우리는 Playwright 다운로드 파일을 어떻게 사용하는지에 대한 생각을 공유할 것이다.자동 다운로드는 때때로 사람을 곤혹스럽게 할 수 있다.다운로드 위치를 처리하고 여러 파일을 동시에 다운로드해야 하며, 흐르는 미디어를 지원하고, 심지어는 더 많은 것을 지원해야 한다.불행히도 모든 병례가 좋은 기록을 가지고 있는 것은 아니다.몇 가지 예를 들어 극작가가 파일 다운로드에 사용하는 API를 깊이 있게 살펴보자.

버튼 클릭 후 파일 다운로드

사이트에서 파일을 다운로드하는 전형적인 예는 버튼을 클릭하는 것이다.샘플 파일 스토리지를 빠르게 검색하여 다음과 같은 리소스를 찾았습니다.https://file-examples.com/
우리는 그것을 진일보한 코드 세션에 사용할 것이다.
우리의 목표는 파일을 다운로드할 때 표준 사용자의 경로를 두루 훑어보는 것이다. 적당한 단추를 선택하고, 그것을 누르고, 파일이 다운로드되기를 기다리는 것이다.일반적으로 이러한 파일은 지정된 기본 경로로 다운로드됩니다.그럼에도 불구하고 클라우드 기반 브라우저나 Docker 이미지를 처리할 때 사용하는 것은 복잡할 수 있기 때문에 코드로 이러한 행위를 차단하고 다운로드를 제어하는 방법이 필요합니다.
웹 페이지에서 특정 버튼을 클릭하려면 CSS 선택기를 통해 구분해야 합니다.원하는 컨트롤에는 CSS 클래스 선택기.btn.btn-orange.btn-outline.btn-xl.page-scroll.download-button 또는 단순화 클래스 선택기.download-button가 있습니다.

다음 코드 세그먼트가 포함된 파일을 다운로드하고 다운로드 파일의 경로를 봅니다.

const playwright = require('playwright');
const pageWithFiles = 'https://file-examples.com/index.php/sample-video-files/sample-avi-files-download/';

(async () => {
    const browser = await playwright['chromium'].launch();
    const context = await browser.newContext({ acceptDownloads: true });
    const page = await context.newPage();
    await page.goto(pageWithFiles);
    const [ download ] = await Promise.all([
        page.waitForEvent('download'), // wait for download to start
        page.click('.download-button')
    ]);
    // wait for download to complete
    const path = await download.path();
    console.log(path);
    await browser.close();
})();

이 코드 세션은 수신Download 이벤트를 통해 보내는 page.on('download') 대상을 통해 파일 다운로드를 처리하는 능력을 보여 줍니다.

메모

사용자가 다운로드한 내용에 접근해야 할 때 acceptDownloads 를 true 로 설정해서 브라우저 상하문을 만들어야 합니다.설정되지 않은 경우acceptDownloads 다운로드 이벤트가 전송되지만 실제 다운로드는 수행되지 않으며 사용자는 다운로드된 파일에 액세스할 수 없습니다.
이 코드 세그먼트를 실행하면 운영체제 임시 폴더의 어느 위치에 있을 수 있는 경로를 얻을 수 있습니다.
macOS를 사용하는 경우 다음과 같습니다.

/var/folders/3s/dnx_jvb501b84yzj6qvzgp_w0000gp/T/playwright_downloads-wGriXd/87c96e25-5077-47bc-a2d0-3eacb7e95efa

saveAs 대상의 download 방법을 사용하여 더욱 믿음직하고 실용적인 것을 정의합시다.파일을 완전히 다운로드하기 전에 이런 방법을 사용하는 것은 안전하다.

const playwright = require('playwright');
const pageWithFiles = 'https://file-examples.com/index.php/sample-video-files/sample-avi-files-download/';
const reliablePath = 'my-file.avi';

(async () => {
    const browser = await playwright['chromium'].launch();
    const context = await browser.newContext({ acceptDownloads: true });
    const page = await context.newPage();
    await page.goto(pageWithFiles);
    const [ download ] = await Promise.all([
        page.waitForEvent('download'), // wait for download to start
        page.click('.download-button')
    ]);
    // save into the desired path
    await download.saveAs(reliablePath);
    // wait for the download and delete the temporary file
    await download.delete()
    await browser.close();
})();

경탄할 만한!
이 파일은 프로젝트의 루트 디렉터리에 다운로드됩니다. 파일 이름은 my-file.avi입니다. 임시 폴더에서 복사할 염려가 없습니다.
그런데 저희가 간소화할 수 있을까요?그럼요.바로 다운로드합시다!

직접 파일 다운로드

앞서 언급한 코드 세션에서 클릭한 버튼에 직접 다운로드 링크가 있습니다.

<a href="https://file-examples-com.github.io/uploads/2018/04/file_example_AVI_480_750kB.avi" download="file_example_AVI_480_750kB.avi" class="btn btn-orange btn-outline btn-xl page-scroll download-button">Download sample AVI file</a>

그래서 우리는 이 버튼의 href 값을 사용하여 극작가의 클릭 시뮬레이션을 사용하지 않고 직접 다운로드할 수 있다.
직접 다운로드를 위해 저희는 두 개의 본체 NodeJS 모듈 fs 과 https 을 사용하여 파일 시스템과 파일 다운로드와 상호작용을 할 것입니다.
그 밖에 우리는 page.$eval 함수를 사용하여 필요한 원소를 얻을 것이다.

const playwright = require('playwright');
const https = require('https');
const fs = require('fs');

const pageWithFiles = 'https://file-examples.com/index.php/sample-video-files/sample-avi-files-download/';
const reliablePath = 'my-file.avi';

(async () => {
    const browser = await playwright['chromium'].launch();
    const context = await browser.newContext({ acceptDownloads: true });
    const page = await context.newPage();
    await page.goto(pageWithFiles);
    const file = fs.createWriteStream(reliablePath);
    const href = await page.$eval('.download-button', el => el.href);
    https.get(href, function(response) {
        response.pipe(file);
    });
    await browser.close();
})();

이런 방법의 주요 장점은 극작가의 방법보다 빠르고 간단하다는 것이다.또한 전체 절차를 간소화하고 데이터 추출 부분을 데이터 다운로드와 분리한다.이러한 결합도 프록시 비용을 낮출 수 있다. 왜냐하면 데이터를 다운로드할 때 프록시를 사용하는 것을 피할 수 있기 때문이다. (인증코드나 Cloudflare 검사가 통과되었을 때)

여러 파일 동시 다운로드

본문을 준비할 때, 나는 여러 개의 파일을 다운로드할 때 단일 라인 문제가 존재한다고 주장하는 유사한 자원을 발견했다.
NodeJS는 확실히 하나 single-threaded architecture 를 사용했지만, 이것은 우리가 여러 개의 프로세스/스레드를 생성해야만 여러 파일을 병렬로 다운로드할 수 있다는 것을 의미하지는 않는다.
NodeJS의 모든 입출력 처리는 비동기적이기 때문에 (정확하게 호출할 때) 여러 파일을 다운로드할 때 병렬 프로그래밍을 걱정할 필요가 없습니다.
앞의 코드 세션을 확장해서 페이지의 모든 파일을 다운로드합시다.또한 다운로드가 병행 처리되었는지 확인하기 위해 파일 다운로드의 시작/종료 사건을 기록할 것입니다.

const playwright = require('playwright');
const https = require('https');
const fs = require('fs');

const pageWithFiles = 'https://file-examples.com/index.php/sample-video-files/sample-avi-files-download/';
const reliablePath = 'my-file.avi';

(async () => {
    const browser = await playwright['chromium'].launch();
    const context = await browser.newContext({ acceptDownloads: true });
    const page = await context.newPage();
    await page.goto(pageWithFiles);
    const hrefs = await page.$$eval('.download-button', els => els.map(el => el.href));
    hrefs.forEach((href, index) => {
        const filePath = `${reliablePath}-${index}`;
        const file = fs.createWriteStream(filePath);
        file.on('pipe', (src) => console.log(`${filePath} started`));
        file.on('finish', (src) => console.log(`${filePath} downloaded`));
        https.get(href, function(response) {
            response.pipe(file);
        });
    });
    await browser.close();
})();

예상한 대로 출력은 다음과 유사합니다.

my-file.avi-0 started
my-file.avi-1 started
my-file.avi-3 started
my-file.avi-2 started
my-file.avi-0 downloaded
my-file.avi-1 downloaded
my-file.avi-2 downloaded
my-file.avi-3 downloaded

봐라!NodeJS 자체가 모든 입출력을 동시에 처리합니다.

결론

Playwright를 사용하여 파일을 다운로드하는 것은 매끄럽고 간단한 작업이며 특히 간단하고 신뢰할 수 있는 API를 사용합니다.제 설명이 데이터를 쉽게 추출하고 파일 다운로드 기능을 통해 웹 스크립트를 확장하는 데 도움이 되었으면 합니다.
극작가 API를 더 잘 이해하기 위해 저는 더 많은 독서를 권장합니다.

Playwright's Download

즐거운 웹 페이지 캡처, 브라우저 지문 변경 잊지 마세요.🕵️