Puppeteer를 사용한 양식 작성 및 제출

이 예제는 PuppeteerCrawler를 사용하여 GitHub에서 리포지토리를 검색하기 위해 헤드리스 Chrome/Puppeteer로 검색 양식을 자동으로 작성하고 제출하는 방법을 보여줍니다. 크롤러는 먼저 검색어, 리포지토리 소유자, 시작 날짜 및 리포지토리 언어를 입력한 다음 양식을 제출하고 결과를 출력합니다. 최종적으로 결과는 Apify 플랫폼의 기본 dataset에 저장되거나 로컬 머신의 ./storage/datasets/default 디렉토리에 JSON 파일로 저장됩니다.

팁

Apify 플랫폼에서 이 예제를 실행하려면 Dockerfile에서 apify/actor-node-puppeteer-chrome 이미지를 선택하세요.

Run on

import { Dataset, launchPuppeteer } from 'crawlee';

// 웹 브라우저 시작
const browser = await launchPuppeteer();

// 새 페이지 생성 및 이동
console.log('대상 페이지 열기');
const page = await browser.newPage();
await page.goto('https://github.com/search/advanced');

// 검색 양식 필드 입력 및 원하는 검색 옵션 선택
console.log('검색 양식 입력');
await page.type('#adv_code_search input.js-advanced-search-input', 'apify-js');
await page.type('#search_from', 'apify');
await page.type('#search_date', '>2015');
await page.select('select#search_language', 'JavaScript');

// 양식 제출 및 다음 페이지 로드 대기
console.log('검색 양식 제출');
await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle2' }),
    page.click('#adv_code_search button[type="submit"]'),
]);

// 검색 결과 목록 가져오기 및 출력
const results = await page.$$eval('[data-testid="results-list"] div.search-title > a', (nodes) =>
    nodes.map((node) => ({
        url: node.href,
        name: node.innerText,
    })),
);

console.log('검색 결과:', results);

// 기본 데이터셋에 데이터 저장
await Dataset.pushData(results);

// 브라우저 닫기
await browser.close();