await page.waitForSelector(".Buttonstyled__StyledButton-sc-140xkaw-1 btsair BasketButton__StyledButton-sc-1qvc90d-0 cvuMvs"); await page.click(".Buttonstyled__StyledButton-sc-140xkaw-1 btsair BasketButton__StyledButton-sc-1qvc90d-0 cvuMvs"); Siempre obtendré este TimeoutError: waiting for selector '.Buttonstyled__StyledButton-sc-140xkaw-1 btsair BasketButton__StyledButton-sc-1qvc90d-0 cvuMvs' failed: timeout 30000ms exceeded el error y sospecho que puede tener que ver con el hecho de que hay espacios en el nombre de la clase. Así es como se ve el botón en el que quiero hacer clic al inspeccionar
El atributo de clase HTML es una lista de nombres de clase separados por espacios , por lo que nunca puede haber una clase con un espacio en su nombre, solo un elemento que tiene varias clases.
Mientras tanto, en un selector de CSS, se usa un espacio para representar "cualquier descendiente", por lo que ".foo bar" significa "buscar un elemento que coincida con .foo, luego encontrar cualquier descendiente del que coincida con bar". El ".foo" significa "tiene clase foo", la "barra" significa "el nombre de la etiqueta es bar". Entonces, su selector está buscando algo completamente incorrecto, aunque parezca razonable a primera vista.
Para decir "debe tener class foo y class bar", el selector de CSS sería ".foo.bar" (tenga en cuenta que no hay espacio y ambas clases están precedidas por un punto). Entonces, en su caso, el elemento coincidiría con ".Buttonstyled__StyledButton-sc-140xkaw-1.btsair.BasketButton__StyledButton-sc-1qvc90d-0.cvuMvs", o ".btsair.cvuMvs.BasketButton__StyledButton-sc-1qvc90d-0", o cualquier otro orden o subconjunto.
Posiblemente, aunque solo desee un selector más simple, como ".btsair".
Una cosa más confiable para buscar es probablemente la identificación del elemento, que es una sola cadena que identifica un solo elemento en el documento. Para eso, usa un prefijo '#', por lo que para su ejemplo escribiría "#php-add-to-cart-button".
