Test HTML Content on a Webpage with Puppeteer

Tyler Clark
InstructorTyler Clark

Share this video with your friends

Send Tweet

Now that we have our setup and environment ready for using Puppeteer to test our create-react-app, we can write our first tests. We will test our h1 and navigation, to make sure that they load correctly. In this lesson, we will be able to watch puppeteer open up a browser and evaluate our tests in real time.

Platon
Platon
~ 3 years ago

Thanks for the course!

Can I reinitialize component state / reinitialize redux store with some mock data in beforeEach() without starting a new browser instance?

E.g. I would like to simulate a counter + / - by clicking a button.

// Counter starts at 0

element = page.$(`.add`)
element.click() 

// and now it's 1.

I would then like to simulate what happens when counter starts at 0 within the same browser instance without doing something hacky like adding decrement button click at the end of the of 'add' test to take the counter to 0 manually.

Learn Sifnos
Learn Sifnos
~ 3 years ago

If you are experiencing TypeError: environment.setup is not a function, just add to package.json:

  "jest": {
    "testEnvironment": "node"
  }
Maja Miarecki
Maja Miarecki
~ 3 years ago

The page variable also must have await, or it is a Promise in a time when page.emulate is called and it throws an error:

 FAIL  src/App.test.js
  on page load
    ✕ h1 loads correctly (1277ms)

  ● on page load › h1 loads correctly

    TypeError: page.emulate is not a function

It is already in the code on github, but NOT in video and many of us is not checking github code...

Anika  Sharma
Anika Sharma
~ 3 years ago

When I run the command "npm run debug", the following error comes: Couldn't find preset "react" relative to directory. Why does this error come?

julio
julio
~ 3 years ago

got error, had to run: npm install -g win-node-env

to make it run as Linux envirionment

Razvan Popa
Razvan Popa
~ 3 years ago

Expected "Welcome to React", received {}

Changed to: html.then(() => { expect(html).toBe('Welcome to React') }) and the test passed. Can't really explain this, can anyone help?

Razvan Popa
Razvan Popa
~ 3 years ago

I also got:

(node:19549) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Protocol error (Runtime.evaluate): Target closed. (node:19549) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Does this mean my node is a bit old?

Doug Grubba
Doug Grubba
~ 3 years ago

I'm receiving the same warning about the unhandled promise rejection and having a little trouble getting past it. Running v10.5.0 of node so I doubt that it is the issue.

I'm not 100% on the syntax needed to handle the rejection.

Carlos
Carlos
~ 3 years ago

I am having issues with running "npm run debug" script at 4:30.

I'm getting the following - npm run debug -> npm ERR! puppeteer-testing@0.1.0 debug: NODE_ENV=debug npm test npm ERR! Exit status 1

and

jest jest : The term 'jest' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

Please advise.

Pav
Pav
~ 2 years ago

If you're on windows...

"debug": "SET NODE_ENV=debug & npm test",
Jwan Khalaf
Jwan Khalaf
~ 2 years ago

How do I get "debug": "NODE_ENV=debug yarn test" working with Parcel?

When I run yarn debug, I get an error:

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Jwan Khalaf
Jwan Khalaf
~ 2 years ago

Update

I've figured it out. On Windows, setting of the NODE_ENV is different, and to make it worse, it is different between various terminals within Windows (e.g. Bash vs PowerShell).

Here's how to fix it.

  • Install cross-env by doing npm install "cross-env".
  • Then in your debug script, have cross-env NODE_ENV=debug yarn test.