Automated testing conversational ChatBots with Playwright

Summary

En este video, Kartik de azureautomation.com muestra cómo construir y automatizar un bot utilizando herramientas de prueba de automatización como Playwright. Destaca la facilidad de automatizar bots, dado que se reducen a un DOM y pueden ser controlados por herramientas de prueba. Kartik también explica cómo utilizar servicios de terceros para crear bots y luego automatizarlos con Playwright, demostrando el proceso paso a paso y cómo generar código de prueba a partir de la grabación de acciones en el navegador.

Takeaways

• 🤖 El video muestra cómo construir y automatizar un bot utilizando herramientas de prueba de automatización como Playwright.
• 🔧 Los bots se pueden construir fácilmente con servicios de terceros y son más accesibles para la automatización debido a su estructura en DOM.
• 🌐 La automatización de los bots es más eficiente cuando se tienen herramientas de prueba que pueden identificar elementos del DOM.
• 🛠️ Las aplicaciones modernas, construidas con TDD en mente, incluyen identificadores únicos que facilitan la automatización.
• 📝 Se puede pedir a los desarrolladores que añadan identificadores únicos a los bots para facilitar su automatización sin código frágil.
• 📚 El video utiliza Landbot.io para crear un chatbot y muestra cómo personalizar y utilizar plantillas predefinidas.
• 📲 Se muestra cómo el bot creado puede ser accedido a través de un enlace y probado en un navegador privado.
• 🔄 El video incluye una demostración de cómo se puede utilizar Playwright para grabar y reproducir acciones en el bot.
• 📝 Se discute la posibilidad de utilizar otros herramientas de automatización como Selenium, Cypress o Puppeteer para bots basados en DOM.
• 🛑 El video enfatiza la importancia de la automatización de los bots y cómo cualquier herramienta de automatización puede ser utilizada para ello.
• 👋 El video concluye agradeciendo a los espectadores y destacando la simplicidad de automatizar bots con herramientas de prueba.

Q & A

¿Quién es el presentador del video y de qué trata su canal en azureautomation.com?

El presentador del video es Kartik y su canal en azureautomation.com se dedica a enseñar cómo automatizar tareas utilizando herramientas de automatización de Azure.

¿Qué herramienta de testing automatizado se utiliza para crear y probar bots en el video?

Se utiliza la herramienta de testing automatizado Playwright para crear y probar bots en el video.

¿Por qué es más fácil automatizar bots que operan en un navegador?

Es más fácil automatizar bots que operan en un navegador porque al final del día, estos bots se reducen a un DOM (Modelo de Objeto de Documento), lo cual es más manejable para las herramientas de automatización que pueden identificar identificadores y manipularlos.

¿Qué son las aplicaciones TDD y cómo facilitan la automatización de pruebas?

Las aplicaciones TDD (Desarrollo Dirigido por Pruebas) son aquellas que se construyen teniendo en mente la testabilidad, lo que significa que incluyen identificadores únicos que facilitan la automatización de pruebas.

¿Cómo se pueden incorporar identificadores únicos en un bot para facilitar su automatización?

Si el bot es desarrollado por la propia empresa, se puede pedir a los desarrolladores que añadan identificadores únicos que luego se puedan utilizar para automatizar la aplicación de manera más eficiente y sin código de prueba frágil.

¿Qué es landbot.io y cómo se utiliza en el video?

Landbot.io es una aplicación para crear bots de chat. En el video, se utiliza para construir un bot de chat desde cero o a partir de una plantilla, y luego se personaliza y se prueba.

¿Qué es una plantilla de chatbot y cómo se puede utilizar para ahorrar tiempo?

Una plantilla de chatbot es un conjunto predefinido de mensajes e interacciones que se pueden utilizar para crear rápidamente un bot de chat sin tener que empezar desde cero. En el video, se utiliza una plantilla de generación de leads avanzados para demostrar cómo ahorrar tiempo en el proceso de creación del bot.

¿Cómo se puede previsualizar y compartir un bot creado con landbot.io?

Después de crear el bot, se puede previsualizar el mensaje y su apariencia. También se puede compartir el bot mediante un enlace o como un pop-up, y luego se copia y se comparte ese enlace.

¿Qué es Playwright y cómo se utiliza para la automatización de UI en el video?

Playwright es una herramienta de automatización de pruebas que permite automatizar la interfaz de usuario de las aplicaciones web. En el video, se utiliza para grabar y reproducir interacciones con el bot creado, lo que permite la automatización de pruebas de UI.

¿Cómo se genera y ejecuta un script de automatización de Playwright en el video?

Se utiliza el comando 'npx playwright codegen' seguido de la URL del bot para generar un script de automatización. Luego, se graba una serie de interacciones con el bot utilizando el grabador de Playwright, y se guarda el script generado para ejecutar las pruebas de automatización.

¿Por qué es importante entender que los bots son objetos DOM para la automatización de pruebas?

Es importante entender que los bots son objetos DOM porque esto significa que cualquier herramienta de automatización de pruebas que pueda manipular elementos DOM, como Playwright, Puppeteer o Cypress, puede utilizarse para automatizarlos fácilmente.

Outlines

00:00

🤖 Creación y Automatización de Bots con Herramientas de Pruebas

Kartik, de azureautomation.com, presenta un tutorial sobre cómo construir y automatizar un bot utilizando herramientas de prueba automatizadas como Playwright. Explica que los bots, al ser DOM (Modelo de Objeto de Documento), son fáciles de automatizar con herramientas de prueba como Selenium, Cypress o Playwright. Destaca la facilidad de automatizar bots con identificadores únicos, especialmente si son desarrollados internamente y se pueden solicitar a los desarrolladores para facilitar el proceso de automatización. Kartik muestra cómo crear un bot simple utilizando una plataforma como landbot.io y cómo personalizar o utilizar plantillas preexistentes para acelerar el proceso.

05:02

🔧 Automatización de Interfaz de Usuario con Playwright

El segundo párrafo se enfoca en la automatización de la interfaz de usuario de un bot utilizando Playwright, una herramienta de prueba que Kartik ha discutido en detalle en otros contextos. Describe el uso de la función de grabación de Playwright para registrar acciones en el navegador y generar código de prueba automáticamente. Kartik muestra el proceso de grabar una interacción con el bot, desde el inicio hasta la recolección de información de lead, y luego detalla cómo se puede ejecutar esta secuencia grabada utilizando Playwright. Resalta la simplicidad de automatizar elementos DOM y cómo cualquier herramienta de prueba adecuada puede ser utilizada para este fin, independientemente de si se trata de Playwright, Puppeteer o Cypress.

Keywords

💡Azure Automation

Azure Automation es un servicio de la plataforma de nube de Microsoft Azure que permite automatizar tareas en la nube. En el video, se utiliza como el contexto en el que se crea y automatiza un bot, resaltando cómo se puede integrar el servicio con herramientas de automatización de pruebas.

💡Playwright

Playwright es una herramienta de automatización de navegadores que permite escribir scripts de automatización de pruebas en JavaScript, TypeScript, Python, y C#. En el video, se menciona como una herramienta para automatizar bots, destacando su capacidad para interactuar con el DOM y realizar pruebas de interfaz de usuario.

💡Bot

Un bot es un programa de computadora diseñado para interactuar con humanos en el entorno de chat. En el video, se enseña cómo construir un bot de chat utilizando servicios de terceros y cómo automatizarlo con herramientas de prueba.

💡Automatización de pruebas

La automatización de pruebas es el proceso de utilizar programas para ejecutar pruebas de software automáticamente. En el video, se discute cómo la automatización de pruebas puede hacer que los bots se ejecuten más rápido y de manera más eficiente.

💡DOM (Document Object Model)

El DOM es una representación de árbol de objetos de un documento que puede ser manipulado por scripts. En el video, se menciona que los bots, al ser ejecutados en un navegador, se pueden automatizar fácilmente debido a su naturaleza de DOM.

💡Selenium

Selenium es una herramienta de automatización de navegadores web y un marco de pruebas integrado para aplicaciones web. Aunque no se utiliza directamente en el video, se menciona como una alternativa a Playwright para la automatización de bots.

💡Cypress

Cypress es una herramienta de automatización de pruebas de front-end que ofrece una experiencia de desarrollo integrada. Al igual que con Selenium, se menciona en el video como otra opción para la automatización de pruebas de bots.

💡Identificadores únicos

Los identificadores únicos son atributos o nombres descriptivos que se utilizan para identificar elementos en una aplicación o un bot. En el video, se sugiere que agregar estos identificadores facilita la automatización de pruebas, evitando códigos de prueba frágiles.

💡Landbot.io

Landbot.io es una plataforma que permite crear chatbots personalizados. En el video, se utiliza para demostrar cómo construir un bot de chat desde cero o a partir de plantillas predefinidas.

💡Plantillas de chatbots

Las plantillas de chatbots son conjuntos predefinidos de interacciones y flujos de trabajo que se pueden utilizar para crear rápidamente un bot de chat. En el video, se muestra cómo se pueden utilizar para generar un flujo de trabajo complejo de adquisición de clientes.

💡Generación de leads

La generación de leads es el proceso de identificar y calificar a potenciales clientes interesados en un producto o servicio. En el video, se utiliza un bot de generación de leads avanzada como ejemplo para demostrar cómo se puede automatizar el proceso de recolección de información de los clientes.

Highlights

Introduction to building a bot using Azure Automation and third-party services.

Demonstration of how bots can be automated using testing tools like Playwright.

Explanation of the ease of automating bots due to their DOM (Document Object Model) nature.

Mention of popular automation testing tools like Selenium, Cypress, and Playwright.

Discussion on the benefits of TDD (Test-Driven Development) for creating testable applications and bots.

Suggestion to add unique identifiers to bots for easier automation.

Tutorial on building a simple bot using a bot creation application like Landbot.io.

Description of the process to create a chatbot for platforms like Web WhatsApp and Facebook Messenger.

Use of templates in Landbot to quickly generate complex workflows for lead generation.

Previewing and customizing the chatbot draft to ensure it meets specific requirements.

Sharing the created bot via a link or pop-up and testing its functionality.

Automating the UI of the created chatbot using Playwright's automation testing tool.

Explanation of Playwright's capabilities and its usage in various programming languages.

Demonstration of Playwright's test runner and code generation using 'npx playwright cod'.

Recording user interactions with the chatbot and generating test scripts automatically.

Copying and pasting the generated code into a new file for further automation testing.

Execution of the recorded test script to playback the chatbot interaction automatically.

Final thoughts on the ease of automating bots with any DOM-based automation testing tool.

Conclusion and thanks for watching the video on automating bots with Playwright.

Transcripts

hi guys my name is kartik and i am from

azure automation.com and welcome to

another video from azure automation

and today we're going to see how we can

actually build

a bot and automate the bot using an

automation testing tool

like playwright and it is much much easy

to see that how you can build a bot

using any third-party services which

helps you

build the bot and also it's much much

easier to automate these bots because

as you can see in the demo over here

these bots runs

much much faster using this automation

testing tool

because all these bots on the end of day

is actually boiled down as a dom

or a document object model so if it is

running on a browser

then it is much much easy to automate

them because we have many

automation testing tools like selenium

or cypress or playwright or any

automation testing tool

which can identify these part

identifiers

and then you can automate them it is

super easy to do that

and again because these applications

these days

which are being built or considering tdd

in mind

like testable application in mind these

applications or even the bots come

with a lot of unique identifier so it is

much much easier to automate them

at the same time if your bot is being

built by your company then it is even

more easier for you to go and ask your

developer

to add a unique identifier so that you

can use them

to automate your application much easily

without any

fragile automation testing code so i'm

going to show you how to build a simple

bot that i have shown you on the demo

right now and also i'm going to

show you in a couple of minutes like how

you can build an automation testing for

them

and run the automation testing like how

we just saw over here

all right so let's get started so as you

can see over here i actually have

a bot creating application like

landbot dot io which helps you build a

chatbot

i mean you can build a chat bot using a

web whatsapp

a facebook messenger or even an appy

chat bot like an application if you

wanted to

and i'm gonna choose the first one

because i don't really want it to do it

other way around and then i'm gonna

choose the start from scratch

over here if you choose that it's gonna

help you

to show you like what are the message

that you really wanted to

add so you can select the hi message and

then you can drag

something like this and then you can put

a media message here if you really

wanted to

or you can send a message saying how are

you doing something like that

and if you do that it will just show you

like once you select hi

it will tell you how are you doing and

then you can add one more interactions

from here

then you can say uh saying can you

please

enter your

email something like that and then you

can send like a message

or the most easiest way to just save the

time at least for this video purpose

is by creating a altogether

a new uh chatbot from the template that

we have got so if i

go over here you can see there are so

many uh templates of chatbots available

and i'm going to choose something like

an advanced lead generation

use this one and then you can see that

it is going to show you a very very

complex workflow

for the lead generation it's all coming

automatically

by just single click and you can see

that you can just customize this if you

really wanted to

or you can delete this workflow if you

really wanted to and things of that

nature

so i'm just going to choose this guy and

i'm just going to preview this draft

uh message like how it's going to look

like and i'm going to share this

bot uh using a link if i wanted to or i

can even choose like a pop-up

and then i can apply and then i can copy

this link so this is the link which i

was talking about so if you go

uh to any one of the uh

browsers so let's say i'm gonna choose a

private window over here

and i'm gonna switch this if i hit enter

you can see that the chat bot that we

just created

will be available for us over here you

can see that

and if i hit hi then it's gonna say what

is your name

so if i put like karthik if i hit

uh like that and say nice to meet you

karthik so this is one of the message

that it gives me so we can test whether

the

this particular message comes in and

then i can add a

dummy email and you can see that the

email has been added it says a thank you

message like a greeting

and then it asks me the company name so

i can just put the company name over

here

and if i hit send it's gonna ask me how

many employees

the company has got the moment just one

and asking me

what is the average marketing cost i

spend

i probably spend nothing for ten dollars

and then it's asked me a lot of

questions over here so i can increase

the website or something like that and

then you can see that all these details

comes in so all these workflows are

automatically been created using this

uh land bots template which has been

available for us

and i'm going to automate this

particular ui and i'm going to show you

how we can do that

and again for automating this particular

ui i'm going to be doing

or using a playwright automation testing

tool and i've extensively talked about

the playwright

in many different language binding like

javascript typescript

also in java and c-sharp and i also

talked about how you can do a lot of

network interaction working with cookies

data-driven testing and integrating with

azure devops github actions

and also like how you can run with

cucumber pdd support and stuff

i have covered everything in this

particular course i'm just going to use

a snippet of this particular code and i

will show you how you can use the

playwrights test runner

to actually do this for you so i'm

actually going to choose one of the

projects which i have already shown in

my course

and i'm going to use the playwright's

coding option which is going to be

nothing but the playwright

test recorder and i'm just going to use

npx

playwright cod gen of

this particular url that we just copied

and i'm gonna hit enter so that it is

gonna show me a

new browser over here and as you can see

that

it brings me up this particular recorder

along with that particular chat

bot being loaded for us which is pretty

cool and now

i can just do a high click you can see

that it just shows me the recording

option has been going on over there

and then i can just enter the name like

karthik

and that's been recorded as well and i'm

gonna say karthik at

techgeek.com.in

and hit enter so it just brings me up

like karthik i can do an assertion if i

really wanted to so i can click that

and i can put the company name as

execute automation

and hit send and the number of employees

let's put 12 for now and

or maybe one and then average marketing

cost

is 10 and then i'm gonna say

uh better lead qualification which we

didn't selected actually

uh so i'm gonna say no for now

and it brings me up so many messages

though yeah okay

uh in the meantime you can sign up here

to access and it says

bye for now which is bad so i can just

hit this

you can see that once i click that it's

going to open up a

a new tab i'm just going to close that

and it's all looking good so this is the

one thing which i have automated at the

moment so it looks like a small workflow

though

but i'm just gonna copy this code which

i have recorded

and i'm just gonna stop the recording

option that i have

created and i'm gonna add this in the

new file over here uh new

test dot js

and i'm gonna paste this guy over here

so whatever that i have

uh created so generated it's all i'm

just gonna copy paste it over here

all right and looks like everything is

clearly generated for us

and now if i just wanted to run this

particular test all i'm going to do is

just put the node and then

bought new test.js so once i hit that

you will see that

the recorder which it has recorded the

whole

operation that i just performed will be

automatically played back for us

using this automation testing tool like

playwright which is quite cool and quite

interesting

because the most important thing to

understand here is all these bots are

once again

a dom object and it is really really

easier to automate these

dom elements using any automation

testing tool it can be playwright or it

can be

uh puppeteer or it can be cyprus you can

name it and you can use them so it's

much much easier so that's it guys this

is another question i have been keep

getting from

from the community asking how we can

automate these uh

bars using an automation testing tool

and the answer is

it can be any automation testing tool

that is nothing like a bottom that you

can really wanted to use it i don't

think you need to use a bar dm for that

matter

but personally i feel you can just use

any automation testing tool

to automate the bots so that's it guys

once again thank you very much watching

this video

and you guys have a great day