{"id":56651,"date":"2023-02-09T10:12:34","date_gmt":"2023-02-09T04:42:34","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56651"},"modified":"2023-02-13T08:35:33","modified_gmt":"2023-02-13T03:05:33","slug":"automated-software-testing-with-puppeteer-jest","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/automated-software-testing-with-puppeteer-jest\/","title":{"rendered":"Automated Software Testing with Puppeteer &#038; amp; Jest"},"content":{"rendered":"<h2>WHAT IS PUPPETEER?<\/h2>\n<p>Puppeteer is a Node.js library developed by Google that lets you control headless Chrome through the DevTools Protocol. It is a tool for automating testing in your application using headless Chrome or Chromebit devices without requiring browser extensions like Selenium Webdriver or PhantomJS.<\/p>\n<h4>WHAT IS JEST?<\/h4>\n<p>Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue, and more!<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56646\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-1024x576.png\" alt=\"Jest Puppeteer UI Automation Architecture\" width=\"625\" height=\"352\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-1024x576.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-300x169.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-768x432.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-1536x864.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2-624x351.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-5-2.png 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Illustrates the overall Puppeteer architecture.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-56647\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6.png\" alt=\"Puppeteer Features\" width=\"793\" height=\"664\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6.png 940w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-300x251.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-768x644.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-624x523.png 624w\" sizes=\"(max-width: 793px) 100vw, 793px\" \/><\/p>\n<h4>PREREQUISITES<\/h4>\n<ul>\n<li>Basic understanding of Node.js<\/li>\n<li>Basic understanding of Puppeteer<\/li>\n<li>A suitable IDE such as VS Code<\/li>\n<\/ul>\n<h4>PUPPETEER SETUP AND LIBRARIES INSTALLATION<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56640\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-1024x544.png\" alt=\"Jest-Puppeteer Installation slide 1\" width=\"625\" height=\"332\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-1024x544.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-300x159.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-768x408.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-1536x816.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1-624x332.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-1.png 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56641\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-1024x545.png\" alt=\"Jest-Puppeteer Installation slide 2\" width=\"625\" height=\"333\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-1024x545.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-300x160.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-768x409.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-1536x818.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2-624x332.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-2.png 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>Once the above setup is done, the jest.config.js file should be created at the root in the project.<\/p>\n<p>Open that file and make a few changes as follows:<\/p>\n<ol>\n<li>\n<pre>set bail: 5,<\/pre>\n<\/li>\n<li>\n<pre>set preset: \"jest-puppeteer\",<\/pre>\n<\/li>\n<\/ol>\n<h5>Create two files at the root<\/h5>\n<p>1] babel.cofig.js<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56642\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-1024x276.png\" alt=\"babel.config.js file\" width=\"625\" height=\"168\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-1024x276.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-300x81.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-768x207.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-1536x414.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3-624x168.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-3.png 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>2] jest-puppeteer.config.js<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56643\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-1024x275.png\" alt=\"Jest Puppeteer Configuration \" width=\"625\" height=\"168\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-1024x275.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-300x80.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-768x206.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-1536x412.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4-624x167.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-4.png 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h4>TEST CASES IMPLEMENTATION<\/h4>\n<p>Once you finish the above installation and code set up, we are good to go for test case automation!<\/p>\n<p>Now, create a folder in your project at the root with name tests<\/p>\n<p>Then create one file for writing test cases in the tests folder with the name example.test.js<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-56648\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-1024x545.png\" alt=\"Test Cases Implementation\" width=\"809\" height=\"430\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-1024x545.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-300x160.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-768x409.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-1536x818.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1-624x332.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-6-1.png 1920w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><\/p>\n<h4>EXECUTION AND EXPLANATION<\/h4>\n<p>To run above written test cases, you need to create a script in the package.json file<\/p>\n<p>Go to the package.json file and update the code in the script section as follows:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-56649\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7-1024x546.png\" alt=\"Node Script to run tests\" width=\"625\" height=\"333\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7-1024x546.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7-300x160.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7-768x410.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7-624x333.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-7.png 1496w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>Once you added Script to test case, open your terminal and type <em><strong>npm run test<\/strong><\/em> and press enter<\/p>\n<h4>TEST RESULT<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-56650\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-1024x545.png\" alt=\"Output of Test Execution\" width=\"739\" height=\"394\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-1024x545.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-300x160.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-768x408.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-1536x817.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8-624x332.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/pptr-8.png 1920w\" sizes=\"(max-width: 739px) 100vw, 739px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>SOURCE CODE LINK<\/h4>\n<p>https:\/\/drive.google.com\/drive\/folders\/1wsul8BX71JmG6xSJo493YM12gnOI9UJf?usp=share_link<\/p>\n<p>&nbsp;<\/p>\n<h4>CONCLUSION<\/h4>\n<p>I hope going through this blog gives you an insight into puppeteer and helps you familiarize yourself with the tool and its capabilities.<\/p>\n<p>I think it&#8217;s one of the best libraries to automate trivial tasks with an easy-to-use API; if you also feel so, go ahead and automate the tedious tasks in your day-to-day life with Puppeteer.<\/p>\n<p>If you have any queries or feedback, please let me know in the comment section,<\/p>\n<p>Thank You!<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>WHAT IS PUPPETEER? Puppeteer is a Node.js library developed by Google that lets you control headless Chrome through the DevTools Protocol. It is a tool for automating testing in your application using headless Chrome or Chromebit devices without requiring browser extensions like Selenium Webdriver or PhantomJS. WHAT IS JEST? Jest is a delightful JavaScript Testing [&hellip;]<\/p>\n","protected":false},"author":1517,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":26},"categories":[446,4686,1816],"tags":[5103],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56651"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1517"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56651"}],"version-history":[{"count":6,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56651\/revisions"}],"predecessor-version":[{"id":56742,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56651\/revisions\/56742"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}