{"id":757,"date":"2023-05-20T11:15:11","date_gmt":"2023-05-20T14:15:11","guid":{"rendered":"https:\/\/lahumada.com\/?p=757"},"modified":"2023-05-20T11:15:11","modified_gmt":"2023-05-20T14:15:11","slug":"como-capturar-elementos-en-playwright","status":"publish","type":"post","link":"https:\/\/lahumada.com\/index.php\/2023\/05\/20\/como-capturar-elementos-en-playwright\/","title":{"rendered":"Como capturar elementos en Playwright"},"content":{"rendered":"\n

Para poder interactuar con los diferentes tipos de elementos de un sitio web va a ser necesario que primero podamos ubicarlos. Para esto, Playwright cuenta con un Generador de C\u00f3digo que nos permitir\u00e1, no solo generar la estructura de nuestro caso de prueba, sino que tambi\u00e9n nos entregar\u00e1 el localizador para cada uno de los elementos.<\/p>\n\n\n\n

Mejores pr\u00e1cticas<\/h2>\n\n\n\n

Ac\u00e1 viene la parte interesante. Playwright cuenta con much\u00edsimas maneras diferentes de capturar objetos. Desde sus propias APIs hasta roles, clases, css, x-path, por componentes (React \/ Vue), entre otros. Hoy hablaremos de la forma que recomienda Playwright para capturar nuestros elementos, que es a trav\u00e9s de us propias GetBy* APIs.<\/p>\n\n\n\n

page.getByRole(role, options)\npage.getByLabel(label, options)\npage.getByPlaceholder(placeholder, options)\npage.getByText(text, options)\npage.getByAltText(altText, options)\npage.getByTitle(title, options)\npage.getByTestId(testId)<\/code><\/pre>\n\n\n\n
De estas APIs, seg\u00fan la documentaci\u00f3n oficial de Playwright, la mejor opci\u00f3n es intentar utilizar getByRole.<\/code><\/strong> Cuando utilizamos esta funci\u00f3n, la API buscar\u00e1 a trav\u00e9s del \u00e1rbol de accessibilidad del sitio web e identificar\u00e1 un elemento a trav\u00e9s de su rol y su nombre. Por ejemplo:<\/p>\n\n\n\n
await page.GetByRole('button', { name: 'Iniciar sesi\u00f3n' })<\/code><\/pre>\n\n\n\n
Lo que har\u00e1 el c\u00f3digo de arriba es que, en vez de buscar algo que tenga el texto “Iniciar sesi\u00f3n” lo que har\u00e1 ser\u00e1 buscar un elemento en la web que entre sus propiedades tenga el rol de “button” y que a su vez se llame “Iniciar Sesi\u00f3n”. Siguiendo el mismo ejemplo, si quisieramos llenar los campos de correo y contrase\u00f1a antes de presionar el but\u00f3n de iniciar sesi\u00f3n, podr\u00edamos utilizar la propiedad llamada Placeholder de ambos objetos.<\/p>\n\n\n\n
await page.GetByPlaceholder('placeholder')<\/code><\/pre>\n\n\n\n
Entonces, para escribir las credenciales y presionar el bot\u00f3n correspondiente para iniciar sesi\u00f3n, podr\u00edamos hacer lo siguiente:<\/p>\n\n\n\n
await page.getByPlaceholder('correo').fill('micorreo@depruebas.com')\nawait page.getByPlaceholder('contrase\u00f1a'.fill('secret')\nawait page.getByRole('button', { name: 'Iniciar sesi\u00f3n' }).click()<\/code><\/pre>\n\n\n\n
Localizadores tradicionales<\/h2>\n\n\n\n
Como ya mencion\u00e9, Playwright recomienda utilizar los getBy* APIs para localizar nuestros elementos. A\u00fan as\u00ed, los m\u00e9todos tradicionales tambi\u00e9n son soportados:<\/p>\n\n\n\n
page.locator('text=Iniciar Sesi\u00f3n')\npage.locator('role=button')\npage.locator('text=correo')\npage.locator('[placeholder=\"Correo electr\u00f3nico\"]')\npage.locator('[alt=\"pedro\"]')\npage.locator('[title=\"Tu carrito\"]')\npage.locator('data-testid=\"Enviar\"]')<\/code><\/pre>\n\n\n\n
Mientras estamos utilizando el Generador de C\u00f3digo de Playwright, podremos ver un peque\u00f1o recuadro en el sitio web que nos indicar\u00e1 el objeto que va a capturar antes de que realicemos manualmente un click. Esto nos ayudar\u00e1, entre otras cosas, a saber si los objetos que estamos capturando son los que necesitamos.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Para empezar a trabajar con el Generador de C\u00f3digo, simplemente escribe la instrucci\u00f3n npx playwright codegen url-del-sitio-web<\/code> en tu consola y podr\u00e1s comenzar a grabar tus casos. <\/p>\n","protected":false},"excerpt":{"rendered":"
Para poder interactuar con los diferentes tipos de elementos de un sitio web va a ser necesario que primero podamos… <\/p>\n
Read more<\/a><\/div>\n","protected":false},"author":1,"featured_media":758,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[25],"tags":[],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/posts\/757"}],"collection":[{"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/comments?post=757"}],"version-history":[{"count":1,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/posts\/757\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/posts\/757\/revisions\/760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/media\/758"}],"wp:attachment":[{"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/media?parent=757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/categories?post=757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lahumada.com\/index.php\/wp-json\/wp\/v2\/tags?post=757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}