Ir al Contenido Principal

Registro de pruebas

Chrome DevTools tiene un panel de Grabadora que permite a los usuarios grabar y reproducir pasos automatizados dentro de Chrome. Estos pasos pueden ser exportados a pruebas WebdriverIO con una extensión haciendo la prueba de escritura muy fácil.

¿Qué es Chrome DevTools Recorder?

La Chrome DevTools Recorder es una herramienta que le permite grabar y reproducir acciones de prueba directamente en el navegador y también exportarlas como JSON (o exportarlas en e2e test), así como medir el rendimiento de las pruebas.

La herramienta es sencilla, y ya que está conectada al navegador, tenemos la conveniencia de no tener que cambiar el contexto ni de tratar con ninguna herramienta de terceros.

Cómo grabar una prueba con Chrome DevTools Recorder

Si tiene la última versión de Chrome tendrá la Grabadora ya instalada y disponible para usted. Abra cualquier sitio web, haga clic con el botón derecho del ratón y seleccione "Inspect". Dentro de DevTools puede abrir la Grabadora pulsando CMD/Control + Shift + p e ingresando "Mostrar Grabador".

Chrome DevTools Recorder

Para comenzar a grabar un viaje de usuario, haga clic en "Iniciar nueva grabación", dale un nombre a tu prueba y luego usa el navegador para registrar tu prueba:

Chrome DevTools Recorder

Siguiente paso, haga clic en "Repetir" para comprobar si la grabación fue exitosa y hace lo que quería hacer. Si todo está bien, haga clic en el icono exportar y seleccione "Exportar como WebdriverIO Test Script":

La opción "Exportar como WebdriverIO Test Script" sólo está disponible si instala la extensión WebdriverIO Chrome Recorder.

Chrome DevTools Recorder

¡Eso es todo!

Exportar registro

Si exportó el flujo como script de prueba WebdriverIO, debería descargar el script que puede copiar&pegar en su suite de pruebas. Por ejemplo, la grabación anterior se ve de la siguiente manera:

describe("My WebdriverIO Test", function () {
it("tests My WebdriverIO Test", function () {
await browser.setWindowSize(1026, 688)
await browser.url("https://webdriver.io/")
await browser.$("#__docusaurus > div.main-wrapper > header > div").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div:nth-child(1) > a:nth-child(3)").click()rec
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > div > a").click()
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > ul > li:nth-child(2) > a").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div.navbar__items.navbar__items--right > div.searchBox_qEbK > button > span.DocSearch-Button-Container > span").click()
await browser.$("#docsearch-input").setValue("click")
await browser.$("#docsearch-item-0 > a > div > div.DocSearch-Hit-content-wrapper > span").click()
});
});

resistente si es necesario. También puede exportar el flujo como archivo JSON y usar el paquete @wdio/chrome-recorder para convertirlo en un script de prueba real.

Siguientes Pasos

Puede utilizar este flujo para crear fácilmente pruebas para sus aplicaciones. Chrome DevTools Recorder tiene varias características adicionales, por ejemplo.:

Asegúrese de revisar sus documentos.

Welcome! How can I help?

WebdriverIO AI Copilot