puppeteer로 iframe의 요소를 조작합니다.
샘플 페이지
iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다.
app/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<iframe src="iframe.html" name="hoge">
</body>
<html>
app/iframe.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframeページ</title>
</head>
<body>
<button type="button" id="button" style="background-color:red;" onclick="chColor()">
おしてね
</button>
<script>
function chColor(){
document.getElementById('button').style.background='blue';
}
</script>
</body>
<html>
샘플 코드 작성
puppeteer의 코드를 작성합니다.
app/script.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
'--disable-setuid-sandbox'
]
});
const page = await browser.newPage();
// urlは適宜変更してください
await page.goto('file:///Users/somiya/app/index.html');
await page.screenshot({ path: 'before.png' });
const frame = await page.frames().find(f => f.name() === 'hoge');
const button = await frame.$('#button');
await button.click();
await page.screenshot({ path: 'after.png'});
browser.close();
})();
frame의 지정을 name로 지정하고 있습니다.
그 후 그 프레임 내의 버튼 요소를 취득해, 클릭이라고 하는 흐름입니다.
(다른 지정 방법이 있으면 알려주세요. iframe 자체 별로 사용하지 않으므로 조사하지 않습니다 m(_ _)m)
실행
$ node script.js
실행하면 버튼을 누르기 전과 누른 후의 스크린샷이 저장되어 있으므로 확인합니다.
[befor]
[after]
이 frame을 사용하면 iframe내에서도 밖에서도 같은 조작을 할 수 있을 것 같네요.
Reference
이 문제에 관하여(puppeteer로 iframe의 요소를 조작합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryosomiya/items/b2e6c04487899ceb991b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
