0
440
Vistas¿Cómo hacer clic en un elemento de la lista con Titiritero?
Soy nuevo en titiritero y estoy tratando de hacer clic en un selector de un menú desplegable el elemento MR aquí
Intenté usar await page.click('.mat-option ng-star-inserted mat-active');
y también
await page.select('#mat-option-0');
aquí está mi código, ¿alguien podría ayudarme a solucionar este problema y entender cómo resolverlo en el futuro? No estoy seguro de qué métodos usar con cada elemento, creo que cada vez que introduzco una clase con espacios en el nombre, ¿podría ser ese el problema?
y ¿alguien tiene alguna de las mejores prácticas para codificar cosas como esta?
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://www.game.co.uk/en/-2640058?cm_sp=NintendoFormatHub-_-Accessories-_-espot-_-PikaCase'); await console.log('Users navigated to site :)'); await page.waitFor(2300); await page.click('.cookiePolicy_inner--actions'); await page.waitFor(1000); await page.click('.addToBasket'); await page.waitFor(1300); await page.click('.secure-checkout'); await page.waitFor(2350); await page.click('.cta-large'); await page.waitFor(1200); await page.goto('https://checkout.game.co.uk/contact'); await page.waitFor(500); await page.click('.mat-form-field-infix'); await page.waitForSelector('.ng-tns-c17-1 ng-trigger ng-trigger-transformPanel mat-select-panel mat-primary'); await page.click('.mat-option ng-star-inserted mat-active'); })();1 Respuestas
Responde la pregunta0
Hay un par de problemas con el script, veámoslos:
- está utilizando
waitFor()con una cantidad de milisegundos, esto es frágil porque nunca sabe si tal vez alguna acción tomará más tiempo, y si no lo hace, perderá el tiempo; puede sustituir estas esperas conwaitForSelector(); de hecho, si usa VSCode (y quizás otros IDE), le notificará que este método está obsoleto, no ignore estas advertencias:
- cuando uso DevTools, no se devuelve ningún elemento para
.mat-option ng-star-inserted mat-activeselector, pero puedo encontrar el elemento deseado con el selector#mat-option-0, o puedo usar la versión más larga, pero tengo para usar un punto (.) antes de cada clase y eliminar espacios entre ellos como.mat-option.ng-star-inserted.mat-active, puede ver una referencia de CSS aquí , el punto es que con espacios, busca descendientes, que no es lo que quieres
Estos dos cambios deberían darle lo que necesita, este es un resultado cuando se ejecuta de mi lado, puede ver que el Mr. ha sido seleccionado:
Llegué allí con este script:
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://www.game.co.uk/en/-2640058?cm_sp=NintendoFormatHub-_-Accessories-_-espot-_-PikaCase'); await console.log('Users navigated to site :)'); await page.waitForSelector('.cookiePolicy_inner--actions'); await page.click('.cookiePolicy_inner--actions'); await page.waitForSelector('.addToBasket'); await page.click('.addToBasket'); await page.waitForSelector('.secure-checkout'); await page.click('.secure-checkout'); await page.waitForSelector('.cta-large'); await page.click('.cta-large'); await page.goto('https://checkout.game.co.uk/contact'); await page.waitForSelector('.mat-form-field-infix'); await page.click('.mat-form-field-infix'); await page.waitForSelector('#mat-option-0'); await page.click('#mat-option-0'); })();Sin embargo, esto todavía no es ideal porque:
- maneja la barra de cookies con clics, intente encontrar una manera sin hacer clic; quizás inyectando una cookie que deshabilite la barra de cookies (si es posible)
- el código es una gran pieza que tal vez esté bien por ahora y este ejemplo, pero podría volverse imposible de mantener si continúa agregando líneas; intente reutilizar código en funciones y métodos