[Puppeteer] 퍼펫티어를 이용해 File Upload 하기[Puppeteer] 퍼펫티어를 이용해 File Upload 하기

Posted at 2020. 5. 29. 21:26 | Posted in Node.js/Puppeteer
반응형





■ 퍼펫티어를 이용해 파일 업로드하기






퍼펫티어를 통한 사무자동화 작업중 사이트의 파일 업로드를 해야하는 경우가 발생하였다.


문제는 헤드리스 모드( 작업화면이 사용자에게 보이지않는 ) 상황으로 완성품을 만들기위해서는.


업로드 버튼을 누르고 → 파일을 찾고 → 이미지를 업로드 하는 과정을


컴퓨터 화면을 보지 않고 진행을 해야한다는 것이다.









다행이 퍼펫티어에서는 waitForFileChooser( ) 메서드를 통해


해결할 수 있는 방법을 제공한다.


아래 코드를 통해 관련 작업을 진행해 보자.




# 소스코드 - node.js

 fileUpload.php

const puppeteer = require( "puppeteer" );


// 사용시 인위적인 딜레이를 주기위한 함수

function delay( timeout ) {

    return new Promise(( resolve ) => {

      setTimeout( resolve, timeout );

    });

}


puppeteer.launch({

      headless : false          // 헤드리스모드의 사용여부를 묻는다.

    , devtools : false          // 개발자 모드의 사용여부를 묻는다.

    , slowMo : 50          // 지정된 시간(ms)만큼 Puppeteer 작업 속도를 낮춘다.

}).then(async browser => {


    const page = await browser.newPage();

    await page.goto( "http://localhost/fileUpload.php", { waitUntil : "networkidle2" } );


    const [fileChooser] = await Promise.all( [

        page.waitForFileChooser( ),

        page.click( "#upFile" )         // 파일을 올릴 input type = "file" 태그를 지정

    ] );


    await fileChooser.accept( [ "puppeteer.png" ] );


    // 3초간딜레이를 준다.

    await delay( 3000 );


    page.waitForNavigation( ),page.click( "#upBtn" );


    // await browser.close( );

});




해당 포스팅은 운영중인 어느 사이트가 아닌


업로드 기능을 가진 페이지를 기준으로 테스트를 진행하려 한다.


아래 파일을 업로드할 웹 페이지를 간단히 제작하자.




# 소스코드 - PHP

 fileUpload.php

<?php

    echo "<pre>";

    print_r( $_FILES );

    echo "</pre>";

?>

<html>

<head>

<title>:: Puppeteer 업로드 속성 ::</title>

<script type="text/javascript">

    function fileUpload() {

        document.getElementById("upFrm").action = "./fileUpload.php";

        document.getElementById("upFrm").submit();

    }

</script>

</head>

<body>

    <form enctype="multipart/form-data" id="upFrm" method="post">

        <input type="file" id="upFile" name="upFile" accept="image/*">

        <br/><br/>

        <input type="button" onClick="fileUpload();" id="upBtn" value="업로드">

    </form>

</body>

</html>





# 출력결과




그럼 위의 이미지와 같이, 지정한 이미지를 자동으로 업로드 해주는 모습을 확인 할 수 있다.







반응형
저작자표시

'Node.js > Puppeteer' 카테고리의 다른 글

퍼펫티어 request, response ( 작성중 )  (3) 2020.05.29
[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절  (0) 2020.05.29
[Puppeteer] evaluate() 페이지 데이터 추출  (0) 2020.05.27
[Puppeteer] evaluate() 함수에 변수 전달하기  (0) 2019.09.30
[Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑  (0) 2019.06.20
//

티스토리툴바