[[oktatas:web|< Web]]
====== Puppeteer ======
* **Szerző:** Sallai András
* Copyright (c) 2024, Sallai András
* Szerkesztve: 2024
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
* Web: https://szit.hu
===== Webhely =====
* https://pptr.dev/
===== Telepítés =====
npm install puppeteer
===== Példa =====
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://szit.hu/');
await page.type('#qsearch__in', 'Programozás');
await page.click('button[type="submit"]');
await page.waitForSelector('body');
const content = await page.content();
const containsProgramming = content.includes('programozas');
if (containsProgramming) {
console.log('Az oldal tartalmazza a "programozas" szót.');
} else {
console.log('Az oldal nem tartalmazza a "programozas" szót.');
}
await browser.close();
})();
A teszt indítás:
node test/test01.js
===== Indítás böngésző fejjel =====
Szeretnénk látni a böngészőt 5 másodpercig. Letiltjuk a fej nélküli indítást:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://szit.hu/');
await new Promise(resolve => setTimeout(resolve, 5000));
await browser.close();
})();
A teszt indítás:
node test/valami.js
===== Képernyőkép =====
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://szit.hu/');
await page.screenshot({ path: 'szit.png', fullPage: true});
await page.pdf({ path: 'szit.pdf', format: 'A4'});
await browser.close();
})();
===== Használat Mocha mellett =====
npm install --save-dev mocha
const puppeteer = require('puppeteer');
const assert = require('assert');
describe('Teszt', function() {
let browser;
let page;
before(async function() {
browser = await puppeteer.launch({headless: true});
page = await browser.newPage();
});
after(async function() {
await browser.close();
});
it('Az oldalra navigálunk', async function() {
await page.goto('https://szit.hu');
const title = await page.title();
assert.strictEqual(title, 'start [szit]')
});
it('Oktatás link a főoldalon', async function() {
await page.goto('https://szit.hu');
const linkExists = await page.waitForSelector('a[href="/doku.php?id=oktatas"]');
assert.ok(linkExists, 'Az Oktatás link nem található a főoldalon.');
});
it('Kattintunk az Oktatás linkre', async function() {
await page.goto('https://szit.hu');
await page.click('a[href="/doku.php?id=oktatas"]');
await page.waitForSelector('body')
const currentUrl = await page.url();
assert.strictEqual(currentUrl, 'https://szit.hu/doku.php?id=oktatas');
});
});
Futtatás ha a Mocha a projektbe van telepítve:
npx mocha
===== Szelektorok =====
const content = await page.$eval('.form .input:nth-child(2) .form-label',
element => element.textContent.trim())
it('Az alap label tartalma', async function() {
const content = await page.$eval('.form .input:first-child .form-label',
element => element.textContent.trim())
assert.strictEqual(content, 'Alap')
})
it('A magasság label tartalma', async function() {
const content = await page.$eval('label[for="height"]',
element => element.textContent.trim())
assert.strictEqual(content, 'Magasság')
})
Az id alapján hivatkozás:
const inputValue = await page.$eval('#height', element => element.value);
===== Háromszög területszámítás =====
Háromszög
const doc = {
baseInput: document.querySelector('#base'),
heightInput: document.querySelector('#height'),
areaInput: document.querySelector('#area'),
calcButton: document.querySelector('#calcButton')
}
const state = {
base: 0,
height: 0,
area: 0
}
doc.calcButton.addEventListener('click', () => {
startCalc()
})
function startCalc() {
state.base = doc.baseInput.value
state.height = doc.heightInput.value
state.area = calcArea(state.base, state.height)
renderResult()
}
function calcArea(base, height) {
return base * height / 2
}
function renderResult() {
doc.baseInput.value = ''
doc.heightInput.value = ''
doc.areaInput.value = state.area
doc.baseInput.focus();
}
==== Teszt ====
Ebben a példában ECMASCriptet használunk, így import kulcsszavakkal importálunk.
import puppeteer from 'puppeteer'
import assert from 'assert'
describe('Területszámítás tesztje', () => {
let browser;
let page;
before(async function () {
browser = await puppeteer.launch({headless: true})
page = await browser.newPage()
await page.goto('http://localhost:3000')
})
after(async function() {
await browser.close()
})
it('Böngésző címsora', async function() {
const title = await page.title()
assert.strictEqual(title, 'Háromszög')
})
it('h1 tartalma', async function() {
const content = await page.$eval('h1', element => element.textContent)
assert.strictEqual(content, 'Háromszög területe')
})
it('Az alap label tartalma', async function() {
const content = await page.$eval('label[for="base"]', element => element.textContent.trim())
assert.strictEqual(content, 'Alap')
})
it('A magasság label tartalma', async function() {
const content = await page.$eval('label[for="height"]', element => element.textContent.trim())
assert.strictEqual(content, 'Magasság')
})
it('Az alap input', async function() {
const element = await page.$('#base')
assert.ok(element, 'A base input elemnek léteznie kell')
})
it('A magasság input', async function() {
const element = await page.$('#height')
assert.ok(element, 'A height input elemnek léteznie kell')
})
it('Input 30 35 és kattintás', async function() {
await page.type('#base', '30')
await page.type('#height', '35')
await page.click('#calcButton')
const actual = await page.$eval('#area', elem => elem.value)
assert.strictEqual(actual, '525')
})
})