Replicate User Activity with Faker and Puppeteer
In this lesson we are going to test a form submission by replicating keyboard input, mouse clicks, and touchscreen events. This will be done with random user information generated by Faker. We will test this in different contexts, including an iPhone 6 environment.
Instructor: [00:00] Inside of our application I've gone ahead and added a login component that basically is just a form with four input boxes and a button to submit it. Once this form is submitted we want our app.js to show the success message component that basically just has a check mark and an H3 to tell this success. Signs out of our app.js.
[00:23] Let's go ahead an add these. Let's import our login component as well as our success message component. Then we'll add state to our class with a complete property of false, a handle submit method where we'll prevent default. Then set the state from false to true.
[00:44] Next, we'll add a ternary down here in the bottom of our HTML where depending on state we're either going to show our login form or our success message. Perfect. Now we'll save it. You can see we have our login form with its four input boxes and a login button. Once this form is filled out and the login button is submitted, we're going to get the success message.
[01:08] Let's use Puppeteer to write an end to end test to make sure this feature works correctly. Back inside of our app test file we're going to import faker. Next, we'll create a user object with four properties, email, password, a first name, and a last name.
[01:35] Faker is helpful because every time we run our test it will generate a new different email and first name and last name. This is helpful to test certain different scenarios. Now let's go ahead and write our end to end test.
[01:46] We'll do a test that our login form works correctly. Then we're going to click into our first name attribute and then type into that attribute our user.firstname. Then next we'll click into our last name attribute and then type in that attribute our user.lastname.
[02:08] Next is our email. We'll type in that, our user.email. Next is our password attribute. We'll type in that, our user.password. Then we'll click the submit button and wait for our success message. Then we'll add a 16 second timeout.
[02:28] This is how we tell Puppeteer to click and type into each part of our login form. Once it's finished typing into each input box we click the send it button and then we wait to check for the success message.
[02:40] We'll run our debug script and we can watch Puppeteer open up a Chromium browser and step through each input box using Faker generated content. It'll click the submit button and our test passed.
[02:56] Each time that we run this test Faker is going to generate new different content to test with. If you remember, this page is emulating a page that is 500 by 2,400 pixels. Puppeteer gives us some built in user experiences that we can use to test with. Import devices from our Puppeteer devices scripters and pluck off the iPhone 6 from our devices.
[03:22] Next, we're going to want to create a new page. Inside of our test we'll const page two equals browser.newpage. Then we're going to emulate the iPhone and go to our local host 3,000. Our browser instance can have any number of pages.
[03:40] Here we're telling it to create a new page that emulates an iPhone, which means it's going to use an iPhone user agent and it's going to replicate in height and width an iPhone. Then finally we tell it to navigate to our local host 3,000.
[03:54] Now we need to switch out our clicks with touchscreens. Let's assign our first name input box to a variable called firstname as well as our last name input box. Our email input, the password, and then our submit button.
[04:17] With these variables we can switch out our clicks with a method called tap. We'll do that for our first name and our last name as well as our email and our password input. Also our submit button. Then switch out our pages with page two.
[04:39] Now not only does this second page emulate an iPhone view, but we're using the touchscreen event instead of a mouse click. Now we can open up our terminal and run our debug script again and watch Chromium open up in the background. You'll notice that it opens up a third page.
[04:58] This is the iPhone view where it's entering in information, using the touch screen event, and submitting the button. Perfect.