puppeteer 트러블슈팅 - 2 > 텍스트 박스에 입력값 넣기 (How to fill an input field using puppeteer)

※  puppeteer 1.20.0 버전에서 발생하는 현상입니다. 

 

Selenium 자동화를 써오다가 새로운 javascript에 puppeteer에 적응하자니 헷갈리는게 너무 많다...

 

Selenium 에서는 sendkeys() 라는 함수를 쓰면 텍스트 박스에 값을 입력할 수 있었는데, puppeteer는 많이 달랐다.

 

네이버에서 간단하게 로그인하는 코드를 작성해봤다.

 

	const page = await browser.newPage();
    await page.setViewport({ width, height });

	await page.goto( "https://www.naver.com/", { waitUntil : "networkidle2" } );

	page.waitForNavigation(),	// 해당 페이지의 탐색이 완료되면 클릭 이벤트를 실행

    await page.click("#account > div > a > i");	// 클릭이벤트를 실행

    await page.waitForSelector("#id");
    await page.type("#id", "id 값");
    await page.waitForSelector("#pw");
    await page.type("#pw", "pw 값");

    await page.click("#frmNIDLogin > fieldset > input");

    await console.log("Done");

    await page.close();
    await browser.close();

 

처음에는 type("select 값" , "id 값");

이런식으로 입력을 시도 해봤는데....

 

 

위와 같이 id / pw 텍스트 박스에 제대로 들어가지 않고 뒤죽박죽으로 들어가는 현상이 있었다.

page.type() 함수 뿐만아니라, page.keyboard.type() 도 마찬가지였다. (내 PC가 이상한건지... ㅠ)

 

저번과 마찬가지로 한창 구글링 삽질을 하다가... 잘 작동하는 입력하는 함수를 찾았다.

 

await page.$eval('#id', el => el.value = 'id_tmp');
await page.$eval('#pw', el => el.value = 'pw_tmp');

 

잘 작동하지 않던 입력하는 코드 부분을 위 코드로 바꿔주면 된다.

 

실행 해보니 엉뚱하게 입력되지 않고, 의도한곳에 잘입력된다.