Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
UI Testing with Puppeteer

You're reading from   UI Testing with Puppeteer Implement end-to-end testing and browser automation using JavaScript and Node.js

Arrow left icon
Product type Paperback
Published in Mar 2021
Publisher Packt
ISBN-13 9781800206786
Length 316 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Dario Kondratiuk Dario Kondratiuk
Author Profile Icon Dario Kondratiuk
Dario Kondratiuk
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Chapter 1: Getting started with Puppeteer 2. Chapter 2: Automated Testing and Test runners FREE CHAPTER 3. Chapter 3: Navigating through a website 4. Chapter 4: Interacting with a page 5. Chapter 5: Waiting for elements and network calls 6. Chapter 6: Executing and Injecting JavaScript 7. Chapter 7: Generating Content with Puppeteer 8. Chapter 8: Environments emulation 9. Chapter 9: Scraping tools 10. Chapter 10: Evaluating and Improving the Performance of a Website 11. Other Books You May Enjoy

Interacting with Elements

Let's go back to our login test. We already have the three elements we need: The user input, the password input, and the login button. Now we need to enter the email and the password and click on the button.

Typing on input elements

The ElementHandle class has a function called type. The signature is type(text, [options]). The options class is not big this time. It only has a delay property. The delay is the number of milliseconds Puppeteer will wait between letters. This is great to emulate real user interaction.

The first part of our test would look like this:

const emailInput = await this.page.$('#email');
await emailInput.type(user, {delay: 100});
const passwordInput = await this.page.$('#password');
await passwordInput.type(password, {delay: 100});

Here, we are looking for the email and password elements, and then emulating a user typing on those inputs.

Now, we need to click on the button.

Clicking on elements...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image