tag:blogger.com,1999:blog-50725072047186505322024-03-08T17:34:20.742+06:00Nadim's BlogThis is destination about Software Quality Assurance.Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.comBlogger73125tag:blogger.com,1999:blog-5072507204718650532.post-51272574585722611942020-09-28T01:49:00.003+06:002020-09-28T01:50:56.188+06:00Cypress: How to handle browser-based authentication pop up dialog in Cypress<p dir="ltr" id="docs-internal-guid-6118d197-7fff-1a24-d33f-7f6844082a8c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span id="docs-internal-guid-b70fca4a-7fff-198d-b86f-2c835bc7ea53"></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Five years ago I have written a </span><a href="https://nadimsaker.blogspot.com/2015/06/selenium-how-to-handle-browser-based.html" style="text-decoration: none;"><span style="-webkit-text-decoration-skip: none; background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration-skip-ink: none; text-decoration: underline; vertical-align: baseline; white-space: pre;">blog</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> on how to handle browser-based authentication for selenium webdriver.</span></p><p dir="ltr" id="docs-internal-guid-6118d197-7fff-1a24-d33f-7f6844082a8c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now it is for cypress.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Cypress has come with a very easy solution.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">A very simple syntax to handle the browser-based authentication,</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">If we have </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">a username</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> and </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">password</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> and the </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">URL</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> then the cypress command will be </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.visit(app_URL, {auth:{username:appUserName, password: appPassword}})</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">For example, we have</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 30pt; margin-right: 30pt; margin-top: 0pt; margin: 0pt 30pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">username : </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">abc</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 30pt; margin-right: 30pt; margin-top: 0pt; margin: 0pt 30pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">password : </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">abc123</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 30pt; margin-right: 30pt; margin-top: 0pt; margin: 0pt 30pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">URL : </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">xyz.com</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-right: 30pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Then cypress command will be</span></p><br /><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #4fc1ff; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">.</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #dcdcaa; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">visit</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">(</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #ce9178; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">'https://www.xyz.com'</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">, {</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt; text-indent: 36pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #9cdcfe; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">auth:</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> {</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><span face="Consolas,sans-serif" style="background-color: transparent; color: #9cdcfe; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">username:</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><span face="Consolas,sans-serif" style="background-color: transparent; color: #9cdcfe; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">abc</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">,</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><span face="Consolas,sans-serif" style="background-color: transparent; color: #9cdcfe; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">password:</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span><span face="Consolas,sans-serif" style="background-color: transparent; color: #9cdcfe; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">abc123</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> }</span></p><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">})</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">There is an alternative way that cypress suggested,</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.visit(http://username:password@domainName.com</span><span style="-webkit-text-decoration-skip: none; background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration-skip-ink: none; text-decoration: underline; vertical-align: baseline; white-space: pre;">)</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Note that we have a special character colon “</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">:”</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> between username and password.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">For the above example,</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Cypress command will be,</span></p><br /><p dir="ltr" style="background-color: #1e1e1e; line-height: 1.62857; margin-bottom: 0pt; margin-top: 0pt;"><span face="Consolas,sans-serif" style="background-color: transparent; color: #4fc1ff; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">.</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #dcdcaa; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">visit</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">(</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #ce9178; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">'https://abc:abc123@www.xyz.com'</span><span face="Consolas,sans-serif" style="background-color: transparent; color: #d4d4d4; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">)</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">That’s all for now. We will discuss more on cypress in my future post.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Thank you. </span></p><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Happy automation testing with Cypress!</span><br />Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-44607653509655207232020-09-12T00:43:00.001+06:002020-09-16T15:57:08.460+06:00Cypress: How to test a web application using Cypress<div style="display: none;"></div><p dir="ltr" id="docs-internal-guid-a5ed0c34-7fff-56cd-8518-749adf06bd5c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In the previous posts, we have discussed various </span><a href="https://nadimsaker.blogspot.com/2020/04/cypress-open-source-front-end-tool-for.html" style="text-decoration: none;"><span style="-webkit-text-decoration-skip: none; background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration-skip-ink: none; text-decoration: underline; vertical-align: baseline; white-space: pre;">features of cypress</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> and the </span><a href="http://shorturl.at/bfiDH" style="text-decoration: none;" target="_blank"><span style="-webkit-text-decoration-skip: none; background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration-skip-ink: none; text-decoration: underline; vertical-align: baseline; white-space: pre;">installation </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">procedure. </span><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Here we will see how a sample test can be written and execute the test using a cypress test runner.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><b>Test case:</b> Search with the text cypress on Google.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><b>Steps</b>:</span></p><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Go to Google.com</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Type the text ‘cypress’</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Click on the Search button</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Verify the text “JavaScript End to End Testing Framework | cypress.io”</span></p></li></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now start automating the script.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">Create a project structure: </span></p><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Open the folder using the visual studio code that I have created in my last </span><a href="http://shorturl.at/bfiDH" style="text-decoration: none;"><span style="-webkit-text-decoration-skip: none; background-color: transparent; color: #1155cc; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration-skip-ink: none; text-decoration: underline; vertical-align: baseline; white-space: pre;">post </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">in order </span></p></li></ol><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre;"><div style="text-align: left;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"> to install </span><span style="font-family: Arial; font-size: 11pt;">the cypress application. Note that I am using visual studio code as the editor for scripting</span><span style="font-size: 11pt;">. </span></div></span><div><div style="text-align: left;"><span style="font-family: Arial; font-size: 11pt; white-space: pre;"> You can use any editor that you feel comfortable with.</span></div><div><br /><ol start="2" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Go to Terminal->New Terminal to open a new terminal.</span></p></li></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 127px; overflow: hidden; width: 624px;"><img height="127" src="https://lh3.googleusercontent.com/uZVX7xZN9vHNOu9r5khAO8J4B7XX2gNs8vopCipasmHavXF_IODrCOo4CmKCk7w5Q9E6LQLhe66CDKV3X6KDPDzDbqzltJqaMSQT7MnnOqCYhNTwIS1VOaAGy75qjHBMzv1CFC4" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><br /><ol start="3" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Type the following command to create a new project structure.</span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">npx cypress open</span></p><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 199px; overflow: hidden; width: 602px;"><img height="199" src="https://lh6.googleusercontent.com/4uhcujyuDdmVLzyapvSTRVEmnk3Yr1H0Rzy1432h6bgvJg5bJmC0h2cBr7nFTwVom-7kcTDDJ0hmVhqNx4tJH7_cl36yR2VfOgABpucwb13IQc6S5KEi0gw7NfHT_olEaX7VgaY" style="margin-left: 0px; margin-top: 0px;" width="602" /></span></span></p><br /><br /><ol start="4" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It will create a cypress project structure. </span></p></li></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 417px; overflow: hidden; width: 624px;"> <img height="417" src="https://lh6.googleusercontent.com/SLohYtH_VXONz2HoD9XIF4ivbuJzs1pmgjGAdDQk3OtIFf--YLvuSXmrLn9zpcDc2kIH52E5nYQS09HVg6RV11k_jaDYUCLGU8_AsAXXAey1eXG2bxy1I1OcPLxtTBL86KAhNCI" style="margin-left: 0px; margin-top: 0px;" width="624" /><span></span><br /></span></span></p><br /><ol start="5" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Click the OK button and the project structure has been created </span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Cypress Test runner window is now opened and click the close button to close the window.</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">The project structure looks like the following.</span></p><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 489px; overflow: hidden; width: 384px;"> <img height="489" src="https://lh6.googleusercontent.com/s4GNihYzzsHWXFcY0AQloqXkhSrLcXCYRtPhsZlZTPAhLJJPdYDmSZv9UKnmMpd429QnyeaCpBkmPLt1IWWD6o-DOh_J37h29EEC4Rmy40i3fEkrf-sPwHA8FpN2bq9MqCmRCQ0" style="margin-left: 0px; margin-top: 0px;" width="384" /></span></span></p><span> </span><br /><br /><ol start="8" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now expand the cypress folder and see the structure.</span></p><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 489px; overflow: hidden; width: 376px;"> <img height="489" src="https://lh3.googleusercontent.com/vuq5V8nSJ6YBIqRC-XAGlbvb7JCIPaesOA_f9JjZYo9NLDy1QF0k8UU2mL6jfn6V9Ux0w2Owf0oxa398-b6LvsWAACeEsq2Yl8vg60xo_yB-H2ot1s7R7IUpVqXze5-DQemPOwc" style="margin-left: 0px; margin-top: 0px;" width="376" /></span></span></p><br /><ol start="9" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">There are four folders.</span></p></li><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">fixtures: All the test data files are there,</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Integration: All the test scripts are there.</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Plugins: cypress plugins are there.</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: lower-alpha; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Support: all the customized commands are there.</span></p></li></ol></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span> </span>I will discuss the project structure in a separate post.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">Writing Test:</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now come to write the cypress test. </span></p><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Expand the Integration folder and note that a folder named “examples” are displayed.</span></p><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 631px; overflow: hidden; width: 301px;"> <img height="631" src="https://lh6.googleusercontent.com/7GQSmzn4PcOYnL1PUf6rpQkikJxU7iL0Wohxcw28jSSmzg29zrdknY69ntkZzBbU0TJnxjqCi0mtpZso3pKPQ6xCiCLwf5mVFiqN0EZJk8E_KBapvN5cWQw7fdIe7MKdm2-zuzg" style="margin-left: 0px; margin-top: 0px;" width="301" /></span></span></p><br /><ol start="2" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now delete that folder as it has some sample scripts and it is not needed now.</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">create a new test file name cypress_test.spec.js</span></p><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 452px; overflow: hidden; width: 624px;"><img height="452" src="https://lh6.googleusercontent.com/HNfy0bcvjCbap1KLiXBHE4ntPqwJeR419WXsFtG3AhrUWOpt-wKjN3X3NaYhs-lw7nGz6YEzpLtc_imGprkGNcahYqa3rFoDPZqw_ndH1C1ErA_XpKK3tsxsrYk-afHtC8aWhRo" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><br /><br /><ol start="4" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Write the following script </span></p></li></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 191px; overflow: hidden; width: 691px;"><img height="191" src="https://lh6.googleusercontent.com/lSYBV3M5DXKfmYiLYK76Q3FtcWSpnnJsz03CHkF5ALv-m6WPZ6hiMZwuAjPbJahzcfH9kUe65ANraP3wwB_HqovOTj-KQWZD2oslqXFSXY-bUYlfQlw7Jkf2oo4VXoMKGd4cvns" style="margin-left: 0px; margin-top: 0px;" width="691" /></span></span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Note that we use describe..it blocks. As cypress is using mocha by default, it uses this block.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.visit() : to visit a page </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.get(): for getting element location or searching an element</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.get().click() : to click an element</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">cy.contains(): to check the text available on the page.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">We will discuss more details on cypress API in later posts.</span></p><br /><ol start="5" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Save the file.</span></p></li></ol><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">Run the test using TestRunner:</span></p><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Open a terminal window</span></p></li><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Type the following command in the terminal.</span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">npx cypress open</span></p><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 229px; overflow: hidden; width: 612px;"><img height="229" src="https://lh3.googleusercontent.com/jBFfaXYUDRs-OeyLTnlvIVfMiyQpgZ3-mauwcsNX3KLFxmwhgyKFfL_grPrv3qW1rnt1LOPNtGABwahN9blvque1OuXpr4zAjeg9w2q66cZ7Gz9jACdQ2jYWb-JIQKGl0SehG9k" style="margin-left: 0px; margin-top: 0px;" width="612" /></span></span></p><br /><ol start="3" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It will open the Cypress test runner.</span></p><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p></li></ol><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 312px; overflow: hidden; width: 502px;"><img height="312" src="https://lh5.googleusercontent.com/Mmcow1NmUy_lu2qDdKPTVfTVp6kZEZMKRLuuqBRXFM-yTFM_KrxrkyYVX9O9CErfyf2tRqh7nbcP9SCoBjAqKtibcOBMWdOkctINiUEPhGHhic5btJ5jqVVoyF0BjdLnbTGnZjQ" style="margin-left: 0px; margin-top: 0px;" width="502" /></span></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now click on the cypress_test.spec.js file and it will start running.</span></p><p></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></p><p></p><p></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre;">Run the test in the terminal:</span></p><p></p><ol style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">If you want to run the cypress test in terminal, then just open the terminal and type the following </span></p></li></ol><span style="font-family: Arial; font-size: 11pt; white-space: pre;"> command:</span><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt; text-align: left;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">npx cypress run</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 101px; overflow: hidden; width: 462px;"><img height="101" src="https://lh6.googleusercontent.com/u6Aym1ImNd63j5wo1as9ROAnK4dBWQqXWaSwj79-Q93dfWI5ZP8q8nPApZYrEmIiorT-rNOOVJ5nqB_djAEbj7_m0CPZ3RZNioBEfR_BvUBDUFmWF-uFnAKs3m9H0bFGeglj4Ow" style="margin-left: 0px; margin-top: 0px;" width="462" /></span></span></p><br /><ol start="2" style="margin-bottom: 0px; margin-top: 0px;"><li dir="ltr" style="background-color: transparent; color: black; font-family: arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">The test will start running in headless mode and display the result.</span></p></li></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: medium none; display: inline-block; height: 349px; overflow: hidden; width: 624px;"><img height="349" src="https://lh3.googleusercontent.com/XWqmiR9Rf98Jq0wA4_PMcZ2Jmnv2GHPRIM4JMlkYw8sNLUN1g91NbLsKor7W1wSP0ieEGwKxMiQLRVU3ERQMscVrwKil6NomxklCto80qgbOZoZqNm0CK7k95UvNGYyv8UkLj_Q" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">That’s all for now. We will discuss more on cypress in my future post.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Thank you. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Happy automation testing with Cypress!<br /></span></p></div></div>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-16908988093454614032020-04-19T01:06:00.000+06:002020-04-21T16:08:01.635+06:00Cypress: How cypress can be installed in our windows machine<div dir="ltr" id="docs-internal-guid-cf4268a4-7fff-46f2-1c92-bebf7cf44c0d" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In our previous </span><a href="https://nadimsaker.blogspot.com/2020/04/cypress-open-source-front-end-tool-for.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre;">post</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">, we have discussed various features of our latest automation tool cypress.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Installation of cypress is easier than any other automation tools. We can install it through npm. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It is a desktop application and it can run Windows, macOS, and Linux.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In my case, I am using windows OS.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Here I will show you a step by step process to install cypress.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<b><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Step 1: </span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Create a folder on your drive with any name. Here I make a folder in my D:\Development\ directory named ‘cypress-test’.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<b><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Step 2: </span></b></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now open your command prompt window or windows PowerShell editor and run the following command to install cypress globally. </span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Note that you can install cypress globally or dev dependency. </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">To install cypress globally run the following command.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">npm install cypress -g</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">To install cypress locally you have to move to the directory where you want to develop the cypress script.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In my case, I just move to the directory D:\Development\ named\cypress-test’</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">The command is,</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 119px; overflow: hidden; width: 289px;"><img height="119" src="https://lh4.googleusercontent.com/GTGwKHyUvIeZXR_3QFB6qJ1X52tFxSloYK39QzTo5eUorHceb8jS1wSskDchvyHJaNRscD7m1O3OzxNauiwkpXKAz4DuSatlDssOXi1FnQWuaaIgRagci88uEn17A-MMgpd593E" style="margin-left: 0px; margin-top: 0px;" width="289" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Run the following command to initiate a package.json file.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 132px; overflow: hidden; width: 407px;"><img height="132" src="https://lh5.googleusercontent.com/unhJbJeEcYPXS9VSxbAk_sPmvCcnci80gFxxo69X-u8swvIJ3zf6OlnzxkKyd0zShLhEMadqaovSN4d5kW-Lef3Yz6jEVWQqmpxyvqCzlvrRXWcalNGiJxfC90yZlyZAAZ6HfE4" style="margin-left: 0px; margin-top: 0px;" width="407" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now run the npm command to install cypress.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 413px; overflow: hidden; width: 478px;"><img height="413" src="https://lh6.googleusercontent.com/Ctt2lqPKqgZaiJg0yfO9adAHE3P5OF6EN0ixx5X6DT84quB_SfbPn6QWB0YpCSH3jvW7hsym_0ROV2tzJMaH9pzNA6l-pw2NvxE_cVfdseBZ5eVbDnrzX95OweHDwGBmW1-Sb5U" style="margin-left: 0px; margin-top: 0px;" width="478" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now Cypress will start to install.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 502px; overflow: hidden; width: 537px;"><img height="502" src="https://lh3.googleusercontent.com/xZQ2h6LVmElHPALtjO3NQ_5_rfxz6nweDowroB5sfPWna4O8EcgNYoAb5Y37clXWymcCj7UwbefDhGci6rL2OlHdqMmEDLhXT1i3O3Oun7O7hWGmKc5RhXdQ1gYUqv6cU2oOfnM" style="margin-left: 0px; margin-top: 0px;" width="537" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Note that I am installing cypress version 4.4.0.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">This is the latest version when I am writing my post.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 727px; overflow: hidden; width: 624px;"><img height="727" src="https://lh6.googleusercontent.com/DcyGR6-DKTXXS44r92bZX2RZGClBo6pWbwpsYBOk5dSPA9ckWaTDll8bVthiR65BU-gO2Sg4cV6SesklHx6syMAuEtTaHgxl8_5OzgSZ4DPz9yg3QfaKOpOyOo6qvEl2TTsy7C4" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Now cypress has successfully installed and we are ready to write our first cypress test.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">If you go to the cypress-test folder you see the following folder and files.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="border: none; display: inline-block; height: 137px; overflow: hidden; width: 589px;"><img src="https://lh6.googleusercontent.com/PWIWQ-IIuCFP6lEzp2zJ2QpNt4yRqu7STlIIneJ2fBpFyD-vMf_3qIYwkQj6ota3allf1wSHd6Ir2uZtxqsGh8D0fY8e1w5YwgVrH6jq17tWmW5hqDngermzfN_sE4om7O3VWi4" style="margin-left: 0px; margin-top: 0px;" /></span></span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In the next post I will show how we can make our cypress project and write a test script and execute.</span></div>
Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-45765664397271282652020-04-18T01:36:00.001+06:002020-04-18T01:37:02.967+06:00Cypress: An open-source front end tool for an end to end testing<div dir="ltr" id="docs-internal-guid-0d078733-7fff-0375-dd66-378392e0e9d5" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Nowadays end to end test is becoming popular and tester are very much fond of these tools. </span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In that case, Cypress is one step ahead due to its first execution of the test script. Scripts are written in </span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">javascript and no runtime server needed. </span></div>
<div style="text-align: left;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It is an open-source and developer-friendly tool and builds from scratch and no selenium dependency.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">According to cypress, it has the following features that make it different from other tools. </span></div>
<ul>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">For every step, it takes a screenshot. When you hover it shows a recorded screenshot.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It can automatically rerun when any changes happen in the script.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">It has spies, stubs, and clocks like unit tests.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Since it does not use any selenium or web driver, tests result are consistent, reliable and flake-free.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Debugging is user friendly.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">No waits needed. It can automatically start and stops when needed.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Network Trafic can be stubbed when needed.</span></li>
<li><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Screenshot can be taken automatically when scripts fail. Also, video can be recorded for the whole steps.</span></li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">In my next post, I show how cypress can be installed and a simple test can be run. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Welcome to the Cypress world!</span></div>
Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-34674472412527531372018-10-06T20:33:00.000+06:002018-10-06T21:15:43.564+06:00Chakram: A Rest API testing framework for JavaScript<p><strong>Rest API test automation</strong> is becoming popular day by day. As Jenkins makes our CI/CD life easier, automation testers are now showing their tendency to automate their rest APIs. When some features changes in an API, they have to test all the related APIs. In microservice arena, number of services are increasing day by day. Postman, Insomnia, SoapUI, Fiddler, JMeter etc. are still a first choice of our testers but I am googling a JavaScript based framework where I can write my test using JavaScript and I got Chakram.</p> <p><strong>Chakram</strong> is an API testing framework that can perform end to end tests on JSON REST endpoints.</p> <p><strong>Features</strong>:</p> <ul> <li>Chakram can perform a BDD style testing. <li>It support JavaScript promises. <li>Tests are simple, clear and expressive. <li>It is built on node.js, mocha and chai. <li>It extends Chai.js, adding HTTP specific assertions. <li>It allows simple verification of returned status codes, the compression used, cookies, headers. <li>It also returns JSON objects and the schema of the JSON response and response times. <li>It uses BDD formatting and hooks so that complex tests can be constructed with the necessary setup and tear down operations. <li>It allows new assertions to be added to the framework. <li>It supports Plugin and Debugging. <li>It exports results in a variety of formats.</li></ul> <p>That’s all for now. In the next post, I will explain how to write Chakram test and run through command line.</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com18tag:blogger.com,1999:blog-5072507204718650532.post-16594204852370658202016-08-15T12:43:00.001+06:002018-07-14T13:44:16.222+06:00Protractor: How to check npm, node and protractor current version and install the new update<p>Sometimes we need to know the current version on npm, node and protractor. Since the community is releasing the latest version continuously, we have to install those updated release frequently. </p><p>The following commands are needed to check the version and install the latest one. For this we need to open a command prompt and write the following code command.</p><p><strong><font color="#0000ff">npm:</font></strong></p><ul><li><strong>Version</strong><br></li></ul><blockquote><p>npm -v</p></blockquote><ul><li><strong>To install the latest version: </strong>npm install npm@latest –g</li></ul><blockquote><p><font color="#333333">Now check the new version: npm –v</font></p></blockquote><p><strong><font color="#0000ff">Node:</font></strong></p><ul><li><strong>Version</strong>: node –v</li><li><strong>To install the latest version: </strong></li><ul><li>Just go to Node JS site and install the latest version.</li></ul></ul><p><strong><font color="#0000ff">Protractor: </font></strong></p><ul><li><font color="#000000"><strong>Version</strong>: npm protractor –version</font></li><li><strong>To install the latest version: </strong></li><ul><li><strong></strong>npm install protractor@latest -g</li></ul></ul>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com1tag:blogger.com,1999:blog-5072507204718650532.post-56703850936972493992016-07-14T03:20:00.000+06:002016-07-14T03:30:53.710+06:00Protractor : How to generate single report for test suites<p>In order to generate aggregate reports we need to use <strong>consolidate </strong>option. <p>We will use our Suite projects that was develop through our post on <a href="http://nadimsaker.blogspot.com/2016/05/protractor-how-to-implement-suites-in.html">how to implement suites in protractor</a>.<br>We implement <strong>consolidate option on </strong>config.js <strong>file here.</strong> <p><strong>Step 1 :</strong> Open the project and implement protractor-jasmine2-html-reporter package by using this <a href="http://nadimsaker.blogspot.com/2016/06/protractor-how-to-implement-html-report_10.html">post</a>.</p> <p><strong>Step 2 :</strong> Open config.js file and write the following script and implement onPrepare() function.</p> <p><a href="https://lh3.googleusercontent.com/-WGLozdmbSnM/V4ay1InohXI/AAAAAAAADm4/1EMqoScqiko/s1600-h/image8.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-YqmErNUdnZk/V4ay2L9zyzI/AAAAAAAADm8/fdtNFlBIqbk/image_thumb4.png?imgmax=800" width="562" height="395"></a><br></p> <p>Note that all the codes of onPrepare() function comes from the previous <a href="http://nadimsaker.blogspot.com/2016/07/protractor-implementing-different.html">post</a> except <strong>consolidate</strong> option. We make <strong>consolidate</strong> as true. <p><strong>Step 3 :</strong> After running the script we see separate suite names at the report and all the suites reports are generate in a single html file. <p><a href="https://lh3.googleusercontent.com/-tjT5tHRRvlA/V4ay3MZ_4nI/AAAAAAAADnA/W99PJm7QUOk/s1600-h/image12.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-uIYeyIuZOYM/V4ay3ztmZEI/AAAAAAAADnE/FYaoQaiG9HU/image_thumb6.png?imgmax=800" width="548" height="194"></a> <p><strong>Step 4 :</strong> If we make <strong>consolidate</strong> as false and run the script we see reports are generated in two separate files for two suites. <p><a href="https://lh3.googleusercontent.com/-9jPiQo1x3xY/V4ay4l5RBEI/AAAAAAAADnI/xMiRxgOrp4w/s1600-h/image20.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-G-_wtPpKm0s/V4ay6Fw41iI/AAAAAAAADnM/5RazUJlOWM8/image_thumb10.png?imgmax=800" width="538" height="253"></a> <p>After running script, <p><a href="https://lh3.googleusercontent.com/-sc8al9LndMI/V4ay60XYQ-I/AAAAAAAADnQ/ACtuii29Hp4/s1600-h/image24.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-l--xCKORQQ0/V4ay8SVOCYI/AAAAAAAADnU/ZhHJqZGoa84/image_thumb12.png?imgmax=800" width="387" height="267"></a> <p>We see reports for only one suite. <p><a href="https://lh3.googleusercontent.com/-HQ4oYY8G7ic/V4ay84MByPI/AAAAAAAADnY/GbqmZAiy2cM/s1600-h/image28.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5t6Z5whjmrdOiUdydfaYEUm6Vqj85YdlUptiFLF6DgNsGMs7lXMWDllYF35WGnDVkLSwmZzToe8mReZLoueW2GnWQ-C_vE7pASaX2lu483nJLMrMX4ZPee2Ax6o74e3jrw9cdiD_86g/?imgmax=800" width="519" height="105"></a> <p><strong>Step 5 :</strong> Now add another option <strong>consolidateAll</strong> and make it <strong>true</strong>. <p><a href="https://lh3.googleusercontent.com/-nIKzyt8vVHM/V4ay-9JXJyI/AAAAAAAADng/Q2KuULIDIsU/s1600-h/image16.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-zhRIBQubKJs/V4ay_w01XXI/AAAAAAAADnk/aYXsq1C79Wg/image_thumb8.png?imgmax=800" width="526" height="269"></a> <p>After running the script we see all the suite report in a single file. <p><a href="https://lh3.googleusercontent.com/-ahEENp7y15k/V4azA-hXSbI/AAAAAAAADno/nNyIGJTfih8/s1600-h/image32.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-gJsVlrOuHXQ/V4azB-00ZyI/AAAAAAAADns/LQOQ9wFbi94/image_thumb16.png?imgmax=800" width="500" height="182"></a> <p>That’s all for now. <p>Happy end to end testing using Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-74128859239484019672016-07-07T00:06:00.001+06:002016-07-07T00:15:13.180+06:00Protractor : Implementing different options for HTML reporter<p>In our last post we have seen that <a href="http://nadimsaker.blogspot.com/2016/06/protractor-how-to-implement-html-report_10.html">how we can generate HTML report using HTML reporters</a>. Here we will see different options for it. <p>In this post we will use our sample projects that was built in our previous <a href="http://nadimsaker.blogspot.com/2016/06/protractor-how-to-implement-html-report_10.html">post</a>. <p><strong>Step 1 : </strong>Open the project. <p><strong>Step 2 : </strong>Now open config.js file. Implement the following options. <p><strong><font color="#0000ff">Option 1 : Report path</font></strong> <p>We can define our own report path where we store the generated report. For this we need to write the following script in onPrepare() function, <p><a href="https://lh3.googleusercontent.com/-kncLes0kXMI/V31KJmU2eXI/AAAAAAAADjA/iMcKsDSMvXI/s1600-h/image3.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-zPxJSy1LSko/V31KKXgX1GI/AAAAAAAADjE/6ECXeObPE0o/image_thumb111.png?imgmax=800" width="534" height="114"></a> <p>Here, <p>jasmine.getEnv().addReporter(): It create report after executing the script. <p>Jasmine2HtmlReporter() : It generate HTML report. <p>savePath: Report folder where report is generated. User can define his own path. <p><strong><font color="#0000ff">Option 2 : Screenshot</font></strong> <p>We need to take screenshot of every page or the result pages. We can add screenshot option at onPrepare() function. Screenshot stores in a default folder named “screenshots”. We can define screenshot folder name instead of default name. We need to write the following code in the onPrepare() function. <p><a href="https://lh3.googleusercontent.com/-kuyug4Lb-LE/V31KLKoSFPI/AAAAAAAADjI/_ntVfhIiRoc/s1600-h/image111.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-vTxUhBpWs1g/V31KL7nDoVI/AAAAAAAADjM/dimrBEgU5aI/image1_thumb.png?imgmax=800" width="508" height="130"></a> <p>Here ‘images’ is the folder name. <p>If you run the script you see that screenshot is created at ‘images’ folder. <p><a href="https://lh3.googleusercontent.com/-ayNOOVJLALk/V31KMp0pW9I/AAAAAAAADjQ/ZEPHQ-3nsUU/s1600-h/image9.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-HoonCTg2InA/V31KNckWepI/AAAAAAAADjU/xVFP_ueJxSs/image_thumb4.png?imgmax=800" width="657" height="131"></a> <p><strong><font color="#0000ff">Option 3 : Screenshot optional</font></strong> <p>We can make the screenshot taking optional. We can make <strong>takeScreenshots</strong> to false to stop taking screenshot. Default option is true. <p> <a href="https://lh3.googleusercontent.com/-Kme4QGGv_Cc/V31KN_S2TpI/AAAAAAAADjY/2u2qGCuzOlo/s1600-h/image41.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-gaqjHZHtKX8/V31KOtV6KyI/AAAAAAAADjc/bFxfrwP4yjg/image_thumb11%25255B1%25255D.png?imgmax=800" width="517" height="139"></a> <p>If you run the script it does not take any screenshot. <p><a href="https://lh3.googleusercontent.com/-GhJZPSSXrfc/V31KPcUHWeI/AAAAAAAADjg/tG7IPrprFMI/s1600-h/image7.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-1X6_AMHqKH8/V31KPwYeUYI/AAAAAAAADjk/nmdrEEoNUzM/image_thumb2.png?imgmax=800" width="244" height="170"></a> <p><strong><font color="#0000ff">Option 4 : Screenshot only for failure cases</font></strong> <p>We can take screenshot only for failure cases like one of the test case fails and then it takes screenshot. In that case we need to make <strong>takeScreenshotsOnlyOnFailures </strong>to true. <p>Note that if you have <strong>takeScreenshots</strong> option as false, you have to make it true otherwise <strong>takeScreenshotsOnlyOnFailures </strong>option will not work. <p><a href="https://lh3.googleusercontent.com/-C3qRhy__sLc/V31KQoQSw6I/AAAAAAAADjo/8ViVC2cspO0/s1600-h/image15.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-rXpX1qJKQVs/V31KRpu0NFI/AAAAAAAADjs/zVOe41dWN4U/image_thumb61.png?imgmax=800" width="450" height="149"></a> <p>Now modify the test script so that test can fail. Now run the script and inspect that screenshot is created and for failed test cases. <p><a href="https://lh3.googleusercontent.com/-c_PWy7G0_co/V31KSkuRkaI/AAAAAAAADjw/cReqwszxl_8/s1600-h/image191.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-2XPDJnoIJ_s/V31KTZrYYrI/AAAAAAAADj0/CMlf8_8JGu0/image_thumb81.png?imgmax=800" width="426" height="233"></a> <p>Since default value of <strong>takeScreenshotsOnlyOnFailures </strong>option is false, so screenshot will be created by default. <p><strong><font color="#0000ff">Option 5 : Screenshot File name</font> </strong> <p>We can fix the screenshot file name using <strong>fixedScreenshotName</strong> option to true. Name of the screenshot will be the test case name that we define after<strong> it</strong> clause. <p><a href="https://lh3.googleusercontent.com/-xN-z33yLtog/V31KT1YsUVI/AAAAAAAADj4/DPe0AbsopwQ/s1600-h/image43.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-zzhE-t0XJ9I/V31KUVBXO7I/AAAAAAAADj8/jdURmkV8FFE/image_thumb18.png?imgmax=800" width="283" height="69"></a> <p><a href="https://lh3.googleusercontent.com/-sZTIpPTxfRM/V31KVBwiETI/AAAAAAAADkA/8R-Zz309AsE/s1600-h/image26.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-UA-nJ3wCP0s/V31KVxUuCQI/AAAAAAAADkE/YwyD5OX0NCo/image_thumb11.png?imgmax=800" width="386" height="135"></a> <p>After running the script we see screenshot is created and the name of screenshot file is the test case name. In my case, this is 'should add two numbers'. <p><a href="https://lh3.googleusercontent.com/-uKsSBhKnceM/V31KWaGAjGI/AAAAAAAADkI/BtPCk8qVjDs/s1600-h/image44.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-Anli44jcbsA/V31KXTN789I/AAAAAAAADkM/B7-B_TtsLcE/image_thumb19.png?imgmax=800" width="604" height="216"></a> <p>Note that default value of<strong> fixedScreenshotName </strong>option is false<strong>.</strong> <p><strong><font color="#0000ff">Option 6 : File prefix of Report file name</font></strong> <p>filePrefixWe can modify the report file name instead of using its default name <strong>htmlReport.html. </strong>We can use prefix with the file name. For this we have to add <strong>filePrefix </strong>option and mention the prefix name as value. In my case I use the “Addition’' as prefix. <p><a href="https://lh3.googleusercontent.com/-iM9Y65uFvrU/V31KX2wrrnI/AAAAAAAADkQ/8kdTizYmrU4/s1600-h/image51%25255B1%25255D.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-OT3mans4t88/V31KYj1Ox1I/AAAAAAAADkU/3PJfvGdhhCw/image_thumb22.png?imgmax=800" width="501" height="186"></a> <p>After running the test we see html report is created with the prefix “Addition’'. <p><a href="https://lh3.googleusercontent.com/-NG9-PGdrZII/V31KZHFnZ_I/AAAAAAAADkY/HtKfokjH_FQ/s1600-h/image56.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-cyYwZA8flhM/V31KaFaYzQI/AAAAAAAADkc/8yJSddomqVQ/image_thumb25.png?imgmax=800" width="573" height="196"></a> <p><strong><font color="#0000ff">Option 7 : Consolidate and ConsolidateAll</font></strong> <p>If you have multiple test suites and you want to create separate reports for every test suite then these option will help you. We have a separate blog post coming after this post. <p><strong>Step 3 : </strong>Now config.js file will look like the following, <p><a href="https://lh3.googleusercontent.com/-5bfWAWOzQXw/V31Ka12OCmI/AAAAAAAADkg/1_yUAwn1CKM/s1600-h/image4.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-HQi37djE1lM/V31KbxiaSSI/AAAAAAAADkk/hmSECm9ebTo/image_thumb1.png?imgmax=800" width="552" height="305"></a> <p><strong>Step 4</strong> : Now open terminal window and run selenium server. <p><a href="https://lh3.googleusercontent.com/-unlSUXWsaYA/V31KcujIzvI/AAAAAAAADko/0s05wjshv7Q/s1600-h/image8.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-QEU_HxCjV_0/V31KdMrvPGI/AAAAAAAADks/ychT7Rmg8TI/image_thumb3.png?imgmax=800" width="475" height="82"></a> <p><strong>Step 5 :</strong> Open another terminal window and run the script. <p><a href="https://lh3.googleusercontent.com/--f5-5Bwhhj0/V31KdgXVr-I/AAAAAAAADkw/OHkRrb59ix8/s1600-h/image151.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-BFkTIcf_JN4/V31KeiKLfmI/AAAAAAAADk0/F_1JUunwP34/image_thumb6.png?imgmax=800" width="523" height="93"></a> <p><strong>Step 6 :</strong> Note that script executes and report file and screenshot are created according to option 1 to option 6. <p><a href="https://lh3.googleusercontent.com/-YGfpbXDh2Co/V31KfNKuGyI/AAAAAAAADk4/fbOzFyvBpQ4/s1600-h/image19.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-WOSpkzWTs-A/V31Kfq4M66I/AAAAAAAADk8/egySAPxaaOg/image_thumb8.png?imgmax=800" width="302" height="179"></a> <p>Now double click on the Addition.html file and see the result. <p><a href="https://lh3.googleusercontent.com/-iLrLr896H1o/V31KgC4KoII/AAAAAAAADlA/cwn9DckgcEI/s1600-h/image23.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-6fGFsc_XI3Y/V31Kg8B6sTI/AAAAAAAADlE/jrnnm4b4ifY/image_thumb10.png?imgmax=800" width="542" height="168"></a> <p>You can also open it through a browser. <p><a href="https://lh3.googleusercontent.com/-vrbhrNdpjeg/V31KhgkvJKI/AAAAAAAADlI/EMDvJUeUdXQ/s1600-h/image31.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-q1sk_oYEYc0/V31KirbAarI/AAAAAAAADlM/FWggcSlJlQ8/image_thumb14.png?imgmax=800" width="513" height="102"></a> <p>Clicking on right side screenshot image you will see the screenshot in browser. <p><a href="https://lh3.googleusercontent.com/-37udg8zHNNc/V31KjDBX6qI/AAAAAAAADlQ/1BaQbPLdgjE/s1600-h/image35.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-C6pcbBHJOmA/V31Kj7dp-aI/AAAAAAAADlU/l4v4Ygx0qhg/image_thumb16.png?imgmax=800" width="535" height="185"></a> <p>That’s all for now. <p>Happy end to end testing using Protractor!!! </p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-34168130935421994302016-06-10T01:30:00.001+06:002016-06-16T01:22:56.008+06:00Protractor : How to implement HTML report in Protractor<p>In our last post we have seen that how we can generate XML report using <a href="http://nadimsaker.blogspot.com/2016/05/protractor-how-to-implement-xmlreports.html" target="_blank">XML reporter</a>. Here we see how we can implement Jasmine HTML reporters. </p> <p>In this post we will use our sample projects that was built in our previous <a href="http://goo.gl/244K2N">post</a>. <p><strong>Step 1 : </strong>Open the project. <p><strong>Step 2 :</strong> Open Terminal window and install protractor-jasmine2-html-reporter package using the following command. <p>npm install protractor-jasmine2-html-reporter --save-dev <p><a href="https://lh3.googleusercontent.com/-N5_A9idJBXE/V1nqLazk0WI/AAAAAAAADfk/oeBJvXfMTm4/s1600-h/image4.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-V8eYxrDM8VY/V1nqMWUmA2I/AAAAAAAADfs/B0rdAtDefDs/image_thumb2.png?imgmax=800" width="665" height="318"></a></p> <p>It installs the following packages </p> <p><a href="https://lh3.googleusercontent.com/-tmTE5horX-M/V1nqMwYVwQI/AAAAAAAADf0/5JwmyE1lTV0/s1600-h/image19.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-Zqy4WoZ9_4Y/V1nqN9UXAsI/AAAAAAAADf8/IYXge3MPis0/image_thumb9.png?imgmax=800" width="603" height="306"></a></p> <p><strong>Step 3 : </strong>Now open config.js file and the following variable for Jasmine2HtmlReporter <pre><code>var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');</code></pre>
<p>Write the following script in onPrepare() function,
<p><a href="https://lh3.googleusercontent.com/-zgUV1owWqMw/V1nqOdvC5AI/AAAAAAAADgE/1xK5FCD_EKQ/s1600-h/image28.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/--pH0kkxO_aA/V1nqPMIQskI/AAAAAAAADgM/TjidkVO9hv8/image_thumb13.png?imgmax=800" width="532" height="145"></a>
<p>Here,
<p>jasmine.getEnv().addReporter(): It create report after executing the script.
<p>Jasmine2HtmlReporter() : It generate HTML report.
<p>savePath: Report folder where report is generated. User can define his own path.<br>
<p><strong>Step 4 : </strong>Now config.js file will look like the following,
<p><a href="https://lh3.googleusercontent.com/-aBYJ4S-n9XY/V1nqP5v_iXI/AAAAAAAADgU/d9bn-BY4aSQ/s1600-h/image32.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgru79BX0TviFUIvK_BSHayg36OCpr0jybQy5jRGWykiZZkdNG4r8vFavI4mZZL75WVHZpg41D28uX4BFO8k4BSdaA6t3OG55KyACgJXYzwOurjznIDTM3835ASpMzhT6rN5XMuH1_Qjw/?imgmax=800" width="592" height="283"></a>
<p><strong>Step 5</strong> : Now open terminal window and run selenium server.
<p><a href="https://lh3.googleusercontent.com/-LldU-7kL0G0/V09IsBFhqnI/AAAAAAAADek/cedL6UbGmZ0/s1600-h/image22.png"><img title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-G7Z1NW6jww4/V09Ite6MooI/AAAAAAAADeo/-CrYHQ-0n6U/image_thumb12.png?imgmax=800" width="369" height="121"></a>
<p><strong>Step 6 :</strong> Open another terminal window and run the script.
<p><a href="https://lh3.googleusercontent.com/-Tb_U17FyU1M/V09It_mKj_I/AAAAAAAADes/d5JnHCszGh0/s1600-h/image26.png"><img title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-ucJtdaxQjlU/V09Iu_SI2kI/AAAAAAAADew/VOvGqMG75IU/image_thumb14.png?imgmax=800" width="428" height="168"></a>
<p><strong>Step 7 :</strong> Note that script executes and report file is created at ‘reports’ folder.
<p><a href="https://lh3.googleusercontent.com/-hca4pvDvM8E/V1nqRaOT-RI/AAAAAAAADgk/NCIPBWuId4U/s1600-h/image36.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-tdDZJQdVDOU/V1nqSfqgf-I/AAAAAAAADgs/gUkjFuDpx10/image_thumb17.png?imgmax=800" width="304" height="253"></a>
<p>Now double click on the htmlReport.html file and see the result. You can also open it through a browser.
<p><a href="https://lh3.googleusercontent.com/-PW0NNf-j2E8/V1nqS1q9-1I/AAAAAAAADg0/T7JDirNrIBg/s1600-h/image40.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-VGMjj6omez8/V1nqTxr2PvI/AAAAAAAADg8/PdjB_GWieDE/image_thumb19.png?imgmax=800" width="569" height="105"></a>
<p><a href="https://lh3.googleusercontent.com/-FnJ40HiorBA/V1nqUoCPH1I/AAAAAAAADhE/XWsNgtRRBWY/s1600-h/image44.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://lh3.googleusercontent.com/-0GNyRvQocWw/V1nqVL5eiqI/AAAAAAAADhM/wHYFJRhUwlc/image_thumb21.png?imgmax=800" width="518" height="218"></a>
<p>Clicking on right side screenshot image you will see the screenshot in browser.
<p>That’s all for now.
<p>In the next post we will see how we can generate HTML report with different options.
<p>Happy end to end testing using Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-26733639677256057932016-06-10T01:30:00.000+06:002016-06-16T01:01:54.383+06:00Protractor : How to implement HTML report in ProtractorIn our last post we have seen that how we can generate XML report using <a href="http://nadimsaker.blogspot.com/2016/05/protractor-how-to-implement-xmlreports.html" target="_blank">XML reporter</a>. Here we see how we can implement Jasmine HTML reporters.<br />
In this post we will use our sample projects that was built in our previous <a href="http://goo.gl/244K2N">post</a>.<br />
<strong>Step 1 : </strong>Open the project.<br />
<strong>Step 2 :</strong> Open Terminal window and install protractor-jasmine2-html-reporter package using the following command.<br />
npm install protractor-jasmine2-html-reporter --save-dev<br />
<a href="https://lh3.googleusercontent.com/-N5_A9idJBXE/V1nqLazk0WI/AAAAAAAADfk/oeBJvXfMTm4/s1600-h/image4.png"><img alt="image" border="0" height="318" src="https://lh3.googleusercontent.com/-V8eYxrDM8VY/V1nqMWUmA2I/AAAAAAAADfs/B0rdAtDefDs/image_thumb2.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="665" /></a><br />
It installs the following packages<br />
<a href="https://lh3.googleusercontent.com/-tmTE5horX-M/V1nqMwYVwQI/AAAAAAAADf0/5JwmyE1lTV0/s1600-h/image19.png"><img alt="image" border="0" height="306" src="https://lh3.googleusercontent.com/-Zqy4WoZ9_4Y/V1nqN9UXAsI/AAAAAAAADf8/IYXge3MPis0/image_thumb9.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="603" /></a><br />
<strong>Step 3 : </strong>Now open config.js file and the following variable for Jasmine2HtmlReporter<br />
<pre><code>var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');</code></pre>
Write the following script in onPrepare() function,<br />
<a href="https://lh3.googleusercontent.com/-zgUV1owWqMw/V1nqOdvC5AI/AAAAAAAADgE/1xK5FCD_EKQ/s1600-h/image28.png"><img alt="image" border="0" height="145" src="https://lh3.googleusercontent.com/--pH0kkxO_aA/V1nqPMIQskI/AAAAAAAADgM/TjidkVO9hv8/image_thumb13.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="532" /></a>
<br />
Here,<br />
jasmine.getEnv().addReporter(): It create report after executing the script.<br />
Jasmine2HtmlReporter() : It generate HTML report.<br />
savePath: Report folder where report is generated. User can define his own path.<br />
<br />
<strong>Step 4 : </strong>Now config.js file will look like the following,<br />
<a href="https://lh3.googleusercontent.com/-aBYJ4S-n9XY/V1nqP5v_iXI/AAAAAAAADgU/d9bn-BY4aSQ/s1600-h/image32.png"><img alt="image" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgru79BX0TviFUIvK_BSHayg36OCpr0jybQy5jRGWykiZZkdNG4r8vFavI4mZZL75WVHZpg41D28uX4BFO8k4BSdaA6t3OG55KyACgJXYzwOurjznIDTM3835ASpMzhT6rN5XMuH1_Qjw/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="592" /></a>
<br />
<strong>Step 5</strong> : Now open terminal window and run selenium server.<br />
<a href="https://lh3.googleusercontent.com/-LldU-7kL0G0/V09IsBFhqnI/AAAAAAAADek/cedL6UbGmZ0/s1600-h/image22.png"><img alt="image" border="0" height="121" src="https://lh3.googleusercontent.com/-G7Z1NW6jww4/V09Ite6MooI/AAAAAAAADeo/-CrYHQ-0n6U/image_thumb12.png?imgmax=800" title="image" width="369" /></a>
<br />
<strong>Step 6 :</strong> Open another terminal window and run the script.<br />
<a href="https://lh3.googleusercontent.com/-Tb_U17FyU1M/V09It_mKj_I/AAAAAAAADes/d5JnHCszGh0/s1600-h/image26.png"><img alt="image" border="0" height="168" src="https://lh3.googleusercontent.com/-ucJtdaxQjlU/V09Iu_SI2kI/AAAAAAAADew/VOvGqMG75IU/image_thumb14.png?imgmax=800" title="image" width="428" /></a>
<br />
<strong>Step 7 :</strong> Note that script executes and report file is created at ‘reports’ folder.<br />
<a href="https://lh3.googleusercontent.com/-hca4pvDvM8E/V1nqRaOT-RI/AAAAAAAADgk/NCIPBWuId4U/s1600-h/image36.png"><img alt="image" border="0" height="253" src="https://lh3.googleusercontent.com/-tdDZJQdVDOU/V1nqSfqgf-I/AAAAAAAADgs/gUkjFuDpx10/image_thumb17.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="304" /></a>
<br />
Now double click on the htmlReport.html file and see the result. You can also open it through a browser.<br />
<a href="https://lh3.googleusercontent.com/-PW0NNf-j2E8/V1nqS1q9-1I/AAAAAAAADg0/T7JDirNrIBg/s1600-h/image40.png"><img alt="image" border="0" height="105" src="https://lh3.googleusercontent.com/-VGMjj6omez8/V1nqTxr2PvI/AAAAAAAADg8/PdjB_GWieDE/image_thumb19.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="569" /></a>
<br />
<a href="https://lh3.googleusercontent.com/-FnJ40HiorBA/V1nqUoCPH1I/AAAAAAAADhE/XWsNgtRRBWY/s1600-h/image44.png"><img alt="image" border="0" height="218" src="https://lh3.googleusercontent.com/-0GNyRvQocWw/V1nqVL5eiqI/AAAAAAAADhM/wHYFJRhUwlc/image_thumb21.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="518" /></a>
<br />
Clicking on right side screenshot image you will see the screenshot in browser.<br />
That’s all for now.<br />
In the next post we will see how we can generate HTML report with different options.<br />
Happy end to end testing using Protractor!!!<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-71404920109294629742016-05-31T01:57:00.000+06:002016-06-02T02:42:52.052+06:00Protractor : How to implement XMLreports in protractor<p>In the post on <a href="http://nadimsaker.blogspot.com/2015/12/protractor-how-to-automate-angularjs.html" target="_blank">how to automate web application using protractor</a> we see that we ran the application and it just print test result at terminal window.</p> <p>Here we see how we can implement Jasmine reporters. We will use xml reports.</p> <p>In this post we will use our sample projects that was built in our previous <a href="http://goo.gl/244K2N">post</a>. <p><strong><font color="#c0504d">Step 1 :</font> </strong>Open the project. <p><strong><font color="#c0504d">Step 2 :</font></strong> Open Terminal window and install jasmine-reporters package using the following command. <p>npm install jasmine-reporters <p> <a href="https://lh3.googleusercontent.com/-Sfmg79yT-Pk/V09IkAXxzCI/AAAAAAAADeE/J7Y91UkbvPY/s1600-h/image8%25255B1%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-l9L-fH64jK8/V09ImEFXyOI/AAAAAAAADeI/curnBH_j1EA/image_thumb4.png?imgmax=800" width="573" height="314"></a> <p>It installs two packages jasmine-reporters@2.1.1 and mkdirp@0.3.5. <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5Eol3-c1kDL5Ibr7XDnr4gT9zqYIP0II9O-cnf1M94as3d2hGwx5KFa0mC5NpgdMCk2sd3m6NQnAqlMl2WXCkCbDYOiY35dRroR0kbiNXdZvjy3Q6nEAB9O7Wa7wttv4fbeVVR8RBg/s1600-h/image4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-kg6HgbhpNaA/V09IoRS7bBI/AAAAAAAADeQ/wYB3aSDWNSY/image_thumb1.png?imgmax=800" width="607" height="160"></a> <p><strong><font color="#c0504d">Step 3 :</font> </strong>Now open config.js file and write the following script in onPrepare() function, <p><a href="https://lh3.googleusercontent.com/-vXXBEG6IiL0/V09IpA28YLI/AAAAAAAADeU/sVvSDtuWbkw/s1600-h/image8.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-UirNu93L0O0/V09Ip9ATrBI/AAAAAAAADeY/6H9k9tUXkTo/image_thumb3.png?imgmax=800" width="603" height="169"></a> <p>Here, <p align="left">jasmine.getEnv().addReporter(): It create report after executing the script. <p align="left">JUnitXmlReporter() : It generate XML report. <p align="left">consolidateAll : Aggregate all the results. <p>savePath: Report folder where report is generated. Use can define his own path.<br>filePrefix: Generated file name.</p> <p><strong><font color="#c0504d">Step 4 :</font> </strong>Now config.js file will look like the following, <p><a href="https://lh3.googleusercontent.com/-krQ4B5Fc0v0/V09IqmqORVI/AAAAAAAADec/yhZ8aMHLEWo/s1600-h/image12.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-lPWBys8X4Z0/V09IrlzjwmI/AAAAAAAADeg/lHRbzs_xvac/image_thumb5.png?imgmax=800" width="638" height="303"></a> <p><font color="#c0504d"><strong>Step 5</strong> :</font> Now open terminal window and run selenium server. <p> <a href="https://lh3.googleusercontent.com/-LldU-7kL0G0/V09IsBFhqnI/AAAAAAAADek/cedL6UbGmZ0/s1600-h/image22.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-G7Z1NW6jww4/V09Ite6MooI/AAAAAAAADeo/-CrYHQ-0n6U/image_thumb12.png?imgmax=800" width="369" height="121"></a> <p><strong><font color="#c0504d">Step 6 :</font></strong> Open another terminal window and run the script. <p><a href="https://lh3.googleusercontent.com/-Tb_U17FyU1M/V09It_mKj_I/AAAAAAAADes/d5JnHCszGh0/s1600-h/image26.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-ucJtdaxQjlU/V09Iu_SI2kI/AAAAAAAADew/VOvGqMG75IU/image_thumb14.png?imgmax=800" width="428" height="168"></a> <p><strong><font color="#c0504d">Step 7 :</font></strong> Note that script executes and report file is created at ‘testreport’ folder. <p><a href="https://lh3.googleusercontent.com/-zCJmDlsXLdY/V09IvgqRFhI/AAAAAAAADe0/NnGL4HoUIHg/s1600-h/image16.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-SOKASfIZE3g/V09IwUZAw9I/AAAAAAAADe4/guNickITrVs/image_thumb7.png?imgmax=800" width="371" height="285"></a> <p>Now double click to open the XML report and see the result. You can also open it through a browser. <p><a href="https://lh3.googleusercontent.com/-DSovCutUApI/V09IxVdltqI/AAAAAAAADe8/3EHjHL1iibw/s1600-h/image20.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-9_xif4Sd_kM/V09IydOR8nI/AAAAAAAADfA/7g_FVmQkFow/image_thumb9.png?imgmax=800" width="551" height="145"></a> <p>That’s all for now. <p>In the next post we will see how we can generate HTML report. <p>Happy end to end testing using Protractor!!! </p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-27145634270557466972016-05-25T03:47:00.000+06:002016-05-25T23:58:35.628+06:00Protractor : How to implement suites in protractor<p>We write many scripts in order to automate functional or regression test cases using protractor but all are scattered and not in order. Sometimes we need to run a group of test cases dedicated to test a specific functionality. In that case we need to group protractor script named <strong>suite</strong>. Using suite we can make a set of scripts.</p> <p>In this post we will use our sample projects that was built in our previous <a href="http://goo.gl/244K2N" target="_blank">post</a>. </p> <p><strong><font color="#0000ff">Step 1 :</font> </strong>Open the project and add two new folders named “addition” and “multiplication” by right clicking on project name and go to New->Directory.</p> <p><a href="https://lh3.googleusercontent.com/-TkkAEpX7HMs/V0TMVT1IeoI/AAAAAAAADbo/moo4PTJ-frk/s1600-h/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-sZKxhn69BoI/V0TMWUydSNI/AAAAAAAADbs/9RYasD6Wd1A/image_thumb1.png?imgmax=800" width="393" height="145"></a><br></p> <p><a href="https://lh3.googleusercontent.com/-uSJK5mTBRqk/V0TMXL72R7I/AAAAAAAADbw/i-hikYyY_xc/s1600-h/image7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-EDokNRGrGcI/V0TMXz6V-MI/AAAAAAAADb0/XtZaOd3_lsc/image_thumb3.png?imgmax=800" width="320" height="175"></a></p> <p><strong><font color="#0000ff">Step 2 :</font></strong> Add a JavaScript file names “testadd1.js” at “addition” folder by right clicking on folder and go New->JavaScript File.</p> <p><a href="https://lh3.googleusercontent.com/-Vwo3_TEmx1o/V0TMYi8u1xI/AAAAAAAADb4/V0Y4QPGo85k/s1600-h/image30.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-b9cwm_BnR2M/V0TMZocdTRI/AAAAAAAADb8/COkOwGOWOU4/image_thumb16.png?imgmax=800" width="490" height="285"></a></p> <p><a href="https://lh3.googleusercontent.com/-mj6ecJisfIA/V0TMaqfChcI/AAAAAAAADcA/dLzqzYTWxGY/s1600-h/image29.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSAulP9XsMIDr-AgHfQ2UOtG5w5NmttWCbEmQobkPUaxxvwIg7vEnKUpXB52Eh-KXQA8GDAKDlOAQirmAqD-P44uH5bqQ9y1mUVwoc-TEmqwFRkTi3csPay3jEzPeunldligBwCFdhQ/?imgmax=800" width="317" height="128"></a></p> <p>Now add another file named “testadd2.js”.</p> <p><a href="https://lh3.googleusercontent.com/-OepJIJNY2D0/V0TMb6PXzpI/AAAAAAAADcI/fadqvfONYzk/s1600-h/image28.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Bu4iJgBNWLo/V0TMdCJev3I/AAAAAAAADcM/xUFWxO9cTMI/image_thumb14.png?imgmax=800" width="347" height="179"></a></p> <p><strong><font color="#0000ff">Step 3 :</font></strong> Now open testadd1.js and add the following script.</p> <p><a href="https://lh3.googleusercontent.com/-tfK5RJO9ihQ/V0TMdirGK3I/AAAAAAAADcQ/9iyl2AdxsKo/s1600-h/image27.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/--9n-rCu15FM/V0TMerYMAJI/AAAAAAAADcU/wBpR4lIM8bg/image_thumb13.png?imgmax=800" width="572" height="380"></a></p> <p>Open testadd2.js and add the following script.</p> <p><a href="https://lh3.googleusercontent.com/-zwe9v_0J8R0/V0TMfZ0jlNI/AAAAAAAADcY/QtsZkMGsewA/s1600-h/image26.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-SiTx67tEnD0/V0TMgaALgKI/AAAAAAAADcc/9K0Th69kTq0/image_thumb12.png?imgmax=800" width="524" height="331"></a></p> <p><strong><font color="#0000ff">Step 4 :</font> </strong>In the same way, add two JS files “testmul1.js” and testmul2.js” on multiplication folder.</p> <p><a href="https://lh3.googleusercontent.com/-qkn9bm5hzAg/V0TMg2GXaPI/AAAAAAAADcg/RNpDs5SsBq8/s1600-h/image34.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-ZhPStTswvnE/V0TMhyGfTSI/AAAAAAAADck/pITuCen0-fU/image_thumb18.png?imgmax=800" width="405" height="250"></a> </p> <p><font color="#0000ff"><strong>Step 5 :</strong> </font>Open “testmul1.js” file and add the following scripts.</p> <p><a href="https://lh3.googleusercontent.com/-jJm1hCWfKvE/V0TMi-JgInI/AAAAAAAADco/BS3nCP_9jUk/s1600-h/image39.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-kO7CTsPYOZA/V0TMjwV5e3I/AAAAAAAADcs/69JfsRXb9FA/image_thumb21.png?imgmax=800" width="465" height="337"></a></p> <p>And Open “testmul2.js” file and add the following scripts,</p> <p><a href="https://lh3.googleusercontent.com/-q2suJh9GhAU/V0TMkTz4GvI/AAAAAAAADcw/jJsz3hns3Hc/s1600-h/image51.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-BiwPxBrxF40/V0TMlfGn3kI/AAAAAAAADc0/tGxL7quKL30/image_thumb27.png?imgmax=800" width="466" height="339"></a></p> <p><font color="#0000ff"><strong>Step 6</strong> :</font> Now open conf.js file and add <strong>suites </strong>options like the following, </p> <p><a href="https://lh3.googleusercontent.com/-FCb8l2rC03M/V0TMl4I8rQI/AAAAAAAADc4/5hszGG5vqCI/s1600-h/image52.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-cA3TKRKzoag/V0TMmlG7GYI/AAAAAAAADc8/y0Ns4zMPpHo/image_thumb28.png?imgmax=800" width="457" height="234"></a></p> <p>Here, addition and multiplication are suites name and we use these name during running scripts.</p> <p>'addition/*.js' means run all .js files located in addition folder.</p> <p>'multiplication/*.js' means run all .js files located in multiplication folder.</p> <p>In this way we can run either any of the suites.</p> <p><strong><font color="#0000ff">Step 7</font></strong> : Now open terminal window and run selenium server.</p> <p><img alt="[image71.png]" src="https://lh6.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600/image71.png" width="437" height="159"> </p> <p><font color="#0000ff"><strong>Step 8</strong> :</font> Now open another terminal window and run all the script located in addition folder by using <strong>addition</strong> suite. The command will be </p> <p>protractor conf.js --suite addition</p> <p><a href="https://lh3.googleusercontent.com/-U2xw3-_DPzY/V0TMndcJ69I/AAAAAAAADdA/kxDaCmbbd7g/s1600-h/image56.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-FfY80V-_XIs/V0TMoUH4i5I/AAAAAAAADdE/f4kvXC_AEeI/image_thumb30.png?imgmax=800" width="494" height="120"></a></p> <p>Common format of this command, </p> <p>protractor conf.js –suite <em>{suite name}</em></p> <p>Pressing enter key will run the script located in addition folder. Please do not merge folder name and suite name. These two are different. </p> <p>You can run any suite by using the suite name.</p> <p>Now run the multiplication suite.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5h5EWv-Tl7l4qrFVZfyKj9lLRpcm8Z_evIpA6STxvVK9gxN0DTdB95YznvMNLZVSrxoT_EQNtJZEgsbHD-zM40mPkaPgyL_77egnXGzIy0cHATQZwrjS8dx0FsjjURlfk3EQoT6Bqdg/s1600-h/image60.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-6BH2BOpR8Tk/V0TMps23cxI/AAAAAAAADdM/2wTxW9XsFfU/image_thumb32.png?imgmax=800" width="504" height="125"></a></p> <p>We can create more suites by using different files from different folders like the following,</p> <p>cal: ['addition/*.js','multiplication/*.js']</p> <p><a href="https://lh3.googleusercontent.com/-s8VEK3opFfY/V0TMqQvj7nI/AAAAAAAADdQ/HRcwNWP02EQ/s1600-h/image64.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-XFd7N5DjoK8/V0TMrQEIZXI/AAAAAAAADdU/7qoGWW4uDaY/image_thumb34.png?imgmax=800" width="430" height="192"></a></p> <p>Here we use different script location separated by comma.</p> <p>Now run the suite,</p> <p><a href="https://lh3.googleusercontent.com/-hCMlXLm6ojs/V0TMr9_UfWI/AAAAAAAADdY/miqDKRsMlAo/s1600-h/image68.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-r3S8jyAaLXY/V0TMsl6ZJkI/AAAAAAAADdc/lPGzGK4hF54/image_thumb36.png?imgmax=800" width="532" height="123"></a></p> <p>That’s all for now. </p> <p>We will see more in future.</p> <p>Happy end to end testing using Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-55420752293928024692016-05-01T02:13:00.000+06:002016-05-01T02:19:46.474+06:00Protractor : How to maximize browser window using protractor<p>In our post on <a href="http://nadimsaker.blogspot.com/2015/12/protractor-how-to-automate-angularjs.html" target="_blank">How to automate AngularJS application using protractor</a> we see that browser window is not maximized.</p> <p>Sometimes we need to maximize our browser window at the time of automation. Protractor has given us a nice command to execute such instruction. <p>In protractor we write script in our conf.js file using onPrepare function. <p>The script will be, <p>browser.manage().window().maximize(); <p><font color="#333333">In our example we use our project that we develop for one of <a href="http://nadimsaker.blogspot.com/2015/12/protractor-how-to-automate-angularjs.html" target="_blank">our previous post</a>.</font> <p><strong><font color="#0000ff">Step 1 :</font></strong> Open the project and open conf.js file and write the above code in onPrepare function like the following. <p><a href="https://lh3.googleusercontent.com/-4cjvG1RQ6kQ/VyUTVN5dLmI/AAAAAAAADak/PK_yTYrgr40/s1600-h/image8.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-8zk3-FX1p0s/VyUTWi4E0dI/AAAAAAAADao/xDnqM9inZB8/image_thumb4.png?imgmax=800" width="332" height="63"></a> <p>Note that <strong>onPrepare</strong> is a function that fires at the time of executing script. So when browser window opens and it first maximize its browser window and then start navigate to the url. <p><font color="#0000ff"><strong>Step 2 :</strong></font><font color="#333333"> Now conf.js file look like the following.</font> <p><a href="https://lh3.googleusercontent.com/-o1Q9mRw2wzo/VyUTXf24pKI/AAAAAAAADas/xHk5T7WHZSM/s1600-h/image7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-C14fOFuHXCc/VyUTX6kjM-I/AAAAAAAADaw/5CdPriJToLI/image_thumb3.png?imgmax=800" width="408" height="171"></a> <p><font color="#0000ff"><strong>Step 3 : </strong></font><font color="#333333">Run selenium server and then run the script using the following command.</font> <p><img alt="image" src="https://lh3.googleusercontent.com/-Qwp9bMQMTPY/VuCilua7XRI/AAAAAAAADRg/-Ls-VQAm2as/image_thumb40.png?imgmax=800"> <p><img alt="image" src="https://lh3.googleusercontent.com/-jtiJVBH2aNI/VuCirP9LzmI/AAAAAAAADR4/joXfcEPJ-qY/image_thumb48.png?imgmax=800"> <p>Note that when browser window opens it first shows a relatively smaller window and then it become maximize to show full screen. <p>That’s all for now. More new things are coming. <p>Wish you a happy e2e testing!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-11674536775232825862016-04-24T02:12:00.000+06:002016-04-24T02:13:41.973+06:00Protractor : How to run protractor script in different browsers<p align="justify">In our last post we have seen on <a href="http://goo.gl/QqTqEu">how we can start our selenium standalone server using gulp</a>. In order to perform cross browser testing it is needed to run our protractor script in different browser. Here we will see how we can do that by running our protractor script in different browser.</p> <p align="justify">Protractor support four major browsers (Chrome, Firefox, IE and Safari).</p> <p align="justify"><font color="#333333">If we use conf.js file to run our protractor script then we need to add Selenium capabilities object to our conf.js file.</font></p> <p align="justify"><a href="https://lh3.googleusercontent.com/-hdQBGvcAxy0/VxvXT2fjXII/AAAAAAAADZI/_3fF0SJ1NIw/s1600-h/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-j0VzU4PhTHA/VxvXUnKp5SI/AAAAAAAADZM/EqNUPZggtsI/image_thumb1.png?imgmax=800" width="269" height="56"></a></p> <p align="justify">Here capabilities is a json object to add browser name. Note that we have to change the browser name here to run our protractor script to our desired browser. If we use ‘chrome’ in place of ‘firefox’ then it starts running our script in chrome browser. Same for ‘safari’ and ‘internet explorer’. We can use two other keys with ‘version’ and ‘platform’.</p> <p align="justify"><strong>Example</strong> : We use our previous project that we have developed in <a href="http://goo.gl/244K2N">our previous post</a>. Here we modify the conf.js file</p> <p align="justify"><strong>Step 1 :</strong> Open the project and open conf.js file.</p> <p align="justify"><strong>Step 2 :</strong> Add the following code for firefox browser. Note that chrome browser is by default for protractor. So we don’t need to mention it. If we implement firefox browser, we can add the following code in our conf.js file.</p> <p align="justify"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKMHZOMfOtEmihdmzshlT9aJlsMSslSzqIECD4HUNMMGZDkwDLB6O1ncq76XW2nrqjOLJoaqK3ymKcwhgkZNxe3GjHQUxomW8QVyN3Bw7I5QnrdepvCGSScVB6j_Qwx6omL8MhUr5xQ/s1600-h/image7.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-IsT43geAbqo/VxvXWFTYg9I/AAAAAAAADZU/8LY4R9jh3BE/image_thumb2.png?imgmax=800" width="269" height="56"></a></p> <p align="justify">Now conf.js file looks like the following,</p> <p align="justify"><a href="https://lh3.googleusercontent.com/-AIC8kGo6mEo/VxvXWhH1rDI/AAAAAAAADZY/ccbPuDldhqU/s1600-h/image20.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-mWC9JKU8XRc/VxvXXZBzsHI/AAAAAAAADZc/HuY9CdfLVFo/image_thumb9.png?imgmax=800" width="383" height="187"></a></p> <p align="justify"><strong>Step 3</strong> : Now run the script by using the following command,</p> <p align="justify"><img alt="image" src="https://lh3.googleusercontent.com/-jtiJVBH2aNI/VuCirP9LzmI/AAAAAAAADR4/joXfcEPJ-qY/image_thumb48.png?imgmax=800"></p> <p align="justify">Note that we have to run Selenium standalone server before that.</p> <p align="justify">When it starts running, opens the firefox browser and execute the steps.</p> <p align="justify">If we want to run our scripts in multiple browsers at a time then we use multicapabilities object. For this we add the following code.</p> <p align="justify"><a href="https://lh3.googleusercontent.com/-Ne7lipjPEQA/VxvXYMzD95I/AAAAAAAADZg/G2qaxkwwH1U/s1600-h/image15.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-SYXiw9TiSrc/VxvXZOim2tI/AAAAAAAADZk/nfJbffWq1u4/image_thumb6.png?imgmax=800" width="265" height="98"></a></p> <p align="justify">Now the conf.js file will be, </p> <p align="justify"><a href="https://lh3.googleusercontent.com/-kR2Y9NMXxJU/VxvXZvrH6oI/AAAAAAAADZo/k1dgkc5y3oU/s1600-h/image16%25255B1%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-cYHSU3VF120/VxvXadcIkeI/AAAAAAAADZs/F2wQ__kPVcg/image16_thumb.png?imgmax=800" width="394" height="221"></a></p> <p align="justify">Now run the script. We see two browser window opens and execute the script. Note that we must have chrome and firefox installed on our machine.</p> <p align="justify">In case of<strong> internet explorer</strong>, things are different. </p> <p align="justify"><strong>Step 1 :</strong> Open the terminal and type the following to install IE driver</p> <p align="justify"><a href="https://lh3.googleusercontent.com/-plk7_5uowPw/VxvXa5FEVoI/AAAAAAAADZw/MFzn2KkuPOo/s1600-h/image%25255B5%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Q5HqTdF4wxg/VxvXbnqKb3I/AAAAAAAADZ0/3r9IlmEnpYo/image_thumb%25255B2%25255D.png?imgmax=800" width="486" height="189"></a></p> <p align="justify"><strong>Step 2 :</strong> Add multicapabilities object to conf.js file like the following where browser name is ‘internet explorer’.</p> <p align="justify"><a href="https://lh3.googleusercontent.com/-v0ev6sXrG40/VxvXcTUZHGI/AAAAAAAADZ4/i7muJpiuWNI/s1600-h/image%25255B10%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-cpHLgrh0kcI/VxvXdBCFYVI/AAAAAAAADZ8/z-CsDSBauDo/image_thumb%25255B5%25255D.png?imgmax=800" width="505" height="240"></a></p> <p align="justify"><strong>Step 3 :</strong> Run selenium standalone server.</p> <p align="justify"><img alt="[image71.png]" src="https://lh6.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600/image71.png"></p> <p align="justify"><strong>Step 4 :</strong> Now run the script by using the following command,</p> <p align="justify"><img alt="image" src="https://lh3.googleusercontent.com/-jtiJVBH2aNI/VuCirP9LzmI/AAAAAAAADR4/joXfcEPJ-qY/image_thumb48.png?imgmax=800"></p> <p align="justify">We see IE browser window opens and execute the script.</p> <p align="justify">In our next posts we will show how we can manage it other ways.</p> <p align="justify">Happy UI Testing with Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-91485593041258658832016-03-31T03:05:00.000+06:002016-04-12T03:13:16.542+06:00Protractor : How to start selenium server using gulp<p>In our previous post we see <a href="http://goo.gl/Kgl98h">how we can run multiple javascript file</a>. There we have started our selenium server by typing the following command at the terminal and pressing enter button. Every time we have to run it manually when executing our protractor script.</p> <p><img alt="[image71.png]" src="https://lh6.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600/image71.png" width="458" height="167"> <p>Gulp can handle the problem and it can run automatically when our protractor scripts start executing. </p> <p>We have to add the following code in our gulpfile.js file.</p> <p><font color="#0000ff"><strong>Step 1 :</strong></font> At first add two variables like the following,</p> <p><a href="https://lh3.googleusercontent.com/-5unGT4144uA/VwwTODSjwKI/AAAAAAAADX0/-3tHgLSgVWM/s1600-h/image%25255B29%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-_m5bi0o_LeE/VwwTPArNhEI/AAAAAAAADX4/3_y_mAGzm_s/image_thumb%25255B17%25255D.png?imgmax=800" width="508" height="39"></a></p> <p>First one is for updating webdriver and second one is for starting Selenium server.</p> <p><font color="#0000ff"><strong>Step 2 :</strong></font> Now add this two task like the following,</p> <p><a href="https://lh3.googleusercontent.com/-C2WDfn95wM4/VwwTPqm3SEI/AAAAAAAADX8/Ie_gKzjsI1g/s1600-h/image%25255B30%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-6Or_8zJoxJ4/VwwTQXHrv1I/AAAAAAAADYA/8NuB3PX-4Tc/image_thumb%25255B18%25255D.png?imgmax=800" width="415" height="45"></a></p> <p><font color="#0000ff"><strong>Step 3 :</strong></font> Now modify default gulp.task() method.</p> <p><a href="https://lh3.googleusercontent.com/-6z4xXpC2RdE/VwwTRLqzidI/AAAAAAAADYE/IhCqoUjs1ws/s1600-h/image%25255B31%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-nDzLifQyx7s/VwwTUWH1sZI/AAAAAAAADYI/YS7wddaKDvQ/image_thumb%25255B19%25255D.png?imgmax=800" width="480" height="147"></a></p> <p>Note that we have added two variables ‘webdriver_update’ and ‘webdriver_standalone’ as gulp.task() argument so that it runs first and then run the default task that means protractor script.</p> <p><font color="#0000ff"><strong>Step 4 :</strong></font> Now gulpfile.js file looks like the following,</p> <p><a href="https://lh3.googleusercontent.com/-9m4_sNOUhLc/VwwTVqWl6xI/AAAAAAAADYM/DrlOzblow3Y/s1600-h/image%25255B32%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Xw4p3wfvBDI/VwwTWzR6YTI/AAAAAAAADYQ/KRVxA2O8e6Q/image_thumb%25255B20%25255D.png?imgmax=800" width="536" height="299"></a></p> <p><font color="#0000ff"><strong>Step 5 :</strong></font> Now run the protractor script using only gulp command and do not need to run selenium standalone server using manual command.</p> <p><a href="https://lh3.googleusercontent.com/-WbQZ1AjKhVM/VwwTXym77GI/AAAAAAAADYU/ZCzpQ0bf_cA/s1600-h/image%25255B22%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-GviTdiu3qk8/VwwTYiLvnbI/AAAAAAAADYY/Ck2wPIx14gA/image_thumb%25255B12%25255D.png?imgmax=800" width="381" height="141"></a></p> <p>It first update selenium webdriver and then start the selenium standalone server. After that it starts executing protractor script.</p> <p><a href="https://lh3.googleusercontent.com/-5PG2WDJckgQ/VwwTZlhLdtI/AAAAAAAADYc/cE9xHlq9GSs/s1600-h/image%25255B28%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-GF2oxcia-ug/VwwTauW_7xI/AAAAAAAADYg/FczMLRfX-9s/image_thumb%25255B16%25255D.png?imgmax=800" width="640" height="197"></a></p> <p>That’s all from here. We will discuss more on gulp and protractor in future. <p>Happy UI Testing with Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-83967733147609098232016-02-29T22:53:00.000+06:002016-03-27T00:41:28.362+06:00Protractor : How to run multiple protractor script Files using Gulp<p>In our last post we have discussed on <a href="http://nadimsaker.blogspot.com/2016/01/protractor-how-to-run-protractor-script.html">running protractor script using gulp</a>. In this post we will show how we can run multiple JavaScript files that contains protractor script.</p> <p>For this purpose we will use our previous project that we have developed to implement gulp on protractor script.</p> <p><strong><font color="#0000ff">Step 1 :</font></strong> Open the project using webstorm editor and add a new folder by right clicking on Project name and going to File>New>Directory </p> <p><a href="https://lh3.googleusercontent.com/-psVqX2ClTHI/VvbXhDroBoI/AAAAAAAADVo/AYnhAv-5Bss/s1600-h/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-ugJEw1zbjiM/VvbXiYYpWGI/AAAAAAAADVs/Ci3OtBOcN_k/image_thumb1.png?imgmax=800" width="525" height="260"></a></p> <p><strong><font color="#0000ff">Step 2 :</font></strong> Enter the folder name as “test” and click Ok button.</p> <p><a href="https://lh3.googleusercontent.com/-9h3760zvhww/VvbXjOro03I/AAAAAAAADVw/wH7zZwV_T9Y/s1600-h/image7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-e13zrP5eEXQ/VvbXkHBLlVI/AAAAAAAADV0/Wx1XFDBfRCU/image_thumb3.png?imgmax=800" width="281" height="114"></a></p> <p><strong><font color="#0000ff">Step 3 :</font></strong> Now move the test.js file to “test” folder by dragging the file and drop it to test folder. Move window is displayed and click OK button. Now test.js file is moved to test folder.</p> <p><a href="https://lh3.googleusercontent.com/-FxIYcJM1THc/VvbXk9j9avI/AAAAAAAADV4/rRfySx0S0u0/s1600-h/image11.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-kiFfY1icE5Q/VvbXmOEy0RI/AAAAAAAADV8/A--BeyfaRyI/image_thumb51.png?imgmax=800" width="360" height="151"></a></p> <p><strong><font color="#0000ff">Step 4 :</font></strong> Rename the test.js file as testadd.js by right clicking on file name and going to Refactor>Rename.</p> <p><a href="https://lh3.googleusercontent.com/-RxlSbchxIXo/VvbXnCb7olI/AAAAAAAADWA/qu4U5xjzjis/s1600-h/image23.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-w4abaWi7ECs/VvbXobF_nPI/AAAAAAAADWE/RmI4FzzMBWU/image_thumb11.png?imgmax=800" width="368" height="206"></a></p> <p>Enter the file name “testadd.js” and click Refactor button.</p> <p><a href="https://lh3.googleusercontent.com/-IgqsxoNVvf8/VvbXpqFsBEI/AAAAAAAADWI/yrhevwEhzLo/s1600-h/image27.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-wFnaDC0ctaU/VvbXqvKIG4I/AAAAAAAADWM/cvyXuBGDq-g/image_thumb13.png?imgmax=800" width="277" height="148"></a></p> <p><strong><font color="#0000ff">Step 5 :</font></strong> Add another js file in the test folder by right clicking on folder and going to File>New>JavaScript File.</p> <p><a href="https://lh3.googleusercontent.com/-9s_zN9zn4aA/VvbXrX4cKgI/AAAAAAAADWQ/U7TKnGDCMGE/s1600-h/image15.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-5HJR4qU5q0s/VvbXsFe8ZwI/AAAAAAAADWU/3E09vrlAk14/image_thumb7.png?imgmax=800" width="545" height="268"></a></p> <p><strong><font color="#0000ff">Step 6 :</font></strong> Enter file name as “testsub.js” and click on Ok button.</p> <p><a href="https://lh3.googleusercontent.com/-LC6XH6S08_o/VvbXtF87k0I/AAAAAAAADWY/1gVITlP2azc/s1600-h/image19.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-tBBKKrgruE4/VvbXuEU1-pI/AAAAAAAADWc/vBnhIJZ9UbU/image_thumb9.png?imgmax=800" width="279" height="112"></a></p> <p><strong><font color="#0000ff">Step 7 :</font></strong> Open testsub.js file for subtraction and write the following code,</p> <p><a href="https://lh3.googleusercontent.com/-kA5uxh6lbYA/VvbXu846vmI/AAAAAAAADWg/ZCJcHSjzVQQ/s1600-h/image31.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-zpG1KpvDKKo/VvbXv4sAG5I/AAAAAAAADWk/wRrZv2xSDus/image_thumb15.png?imgmax=800" width="392" height="276"></a></p> <p>Note that above scripts subtract two numbers.</p> <p><strong><font color="#0000ff">Step 8 :</font></strong> Now there are two files to run in the test folder. We can handle it by modifying gulpfile.js. </p> <p><strong><font color="#0000ff">Step 9 :</font></strong> Open gulpfile.js and modify gulp.src() method by writing the following code,</p> <p><a href="https://lh3.googleusercontent.com/-uee9lBlZSjM/VvbXwtcx0vI/AAAAAAAADWo/EmmH81mQrcg/s1600-h/image41.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-BXs-vgF-ANU/VvbXx7_jc4I/AAAAAAAADWs/CLf1kRQ5E0E/image_thumb11%25255B1%25255D.png?imgmax=800" width="224" height="33"></a></p> <p>Note that above expression means include all files as source files in the “test” folder that has .js extension. So it will execute all the .js extension files in the “test” folder. </p> <p><strong><font color="#0000ff">Step 10 :</font></strong> Now gulpfile.js looks like the following,</p> <p><a href="https://lh3.googleusercontent.com/-WW0u-LEdi0Q/VvbXyXAg4sI/AAAAAAAADWw/-0EEqbOZvvo/s1600-h/image8.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-byyHu5jJbWk/VvbXzmYgnbI/AAAAAAAADW0/aVwnRjDWMJI/image_thumb31.png?imgmax=800" width="465" height="234"></a> </p> <p><strong><font color="#0000ff">Step 11 :</font></strong> Now go to terminal and start selenium server using the command, <p><img alt="[image71.png]" src="https://lh6.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600/image71.png" width="458" height="167"> <p>Run the following command to run our protractor script. <p>gulp <p><a href="https://lh3.googleusercontent.com/-9JDaIh5BQsg/Vunt3Xxm_1I/AAAAAAAADUc/O3wkAFiBPGY/s1600-h/image%25255B14%25255D.png"><img title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-9WKrDtBCtOc/Vunt4O8V-jI/AAAAAAAADUg/bQxDhn6pAc0/image_thumb%25255B10%25255D.png?imgmax=800" width="324" height="250"></a> <p>Note that scripts run and at first it execute testadd.js file and then execute testsub.js files. It opened chrome browser and execute addition first and then subtraction. We get the following result. <p><a href="https://lh3.googleusercontent.com/-8kz8SxQMzUw/VvbX0tygU0I/AAAAAAAADW4/zDzx5sRHzV8/s1600-h/image121.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-9Nm_zcP3M54/VvbX1rGFRjI/AAAAAAAADW8/0UmiU98YauU/image_thumb5.png?imgmax=800" width="559" height="295"></a> <p>That’s all from here. We will discuss more on gulp and protractor in future. <p>Happy UI Testing with Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-13062239180354903612016-01-01T05:54:00.000+06:002016-03-17T05:55:04.248+06:00Protractor : How to run Protractor script using gulp runner<p>In our last post we have seen <a href="http://goo.gl/244K2N">how we can automate AngularJS application using protractor</a>. Here we will show how we can run our protractor script using gulp. Gulp is a tool that helps to run our JavaScript files. We can write our protractor script in separate JS files and instruct gulp to run all the js files one by one.</p> <p>Here we will use our previous protractor test project and run our protector test using Gulp.</p> <p><font color="#ff0000"><strong><font color="#c0504d">Step 1 :</font> </strong></font>Open the test project that was developed our previous <a href="http://goo.gl/244K2N">post</a>. </p> <p><a href="https://lh3.googleusercontent.com/-ADnHNwqMmeQ/VuntgJZWNuI/AAAAAAAADSs/RJYHpA_39II/s1600-h/image%25255B9%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-6HB79iCEVZQ/VunthJAwtuI/AAAAAAAADSw/PFoz5lF3SW0/image_thumb%25255B5%25255D.png?imgmax=800" width="610" height="383"></a></p> <p><strong><font color="#c0504d">Step 2 :</font></strong> Open a new terminal and run the following command to install gulp globally.</p><pre>npm install --global gulp</pre><pre><a href="https://lh3.googleusercontent.com/-9p5vn6xhgQ0/Vunth7hBirI/AAAAAAAADS0/dQwBKklfcvA/s1600-h/image%25255B10%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-R5iH8uL17ho/Vuntik1r_QI/AAAAAAAADS4/D6V9r91Ibig/image_thumb%25255B6%25255D.png?imgmax=800" width="440" height="186"></a></pre><pre><font face="Arial"><font color="#c0504d"><strong>Step 3 :</strong></font> Install gulp in our project locally (project devDependencies) by running following command.</font></pre><pre>npm install --save-dev gulp</pre>
<p><a href="https://lh3.googleusercontent.com/-kve2ZyrIosk/VuntjUMFmPI/AAAAAAAADS8/C0EJzmVRb-Y/s1600-h/image%25255B11%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-MSx87nCkcw8/VuntkK-ONII/AAAAAAAADTA/RsKuGSjA3zY/image_thumb%25255B7%25255D.png?imgmax=800" width="488" height="169"></a></p>
<p>Note that a new folder node_module is created and all the gulp files are there.</p>
<p><a href="https://lh3.googleusercontent.com/-xuOG2TwozXs/VuntkwvP0bI/AAAAAAAADTE/-pEz-HS3ml8/s1600-h/image17.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-qjIpOYFAKVg/Vuntl-LBRKI/AAAAAAAADTI/MVNEroXttL8/image_thumb8.png?imgmax=800" width="388" height="340"></a></p>
<p><font face="Arial"><strong><font color="#c0504d">Step 4 :</font></strong> Create a gulpfile.js at the root of our project. </font></p>
<ul>
<li><font face="Arial">Right click on the project and go to File>New>JavaScript File.</font></li></ul>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-gFW_m7n1J7M/Vuntm_-qwnI/AAAAAAAADTM/BJyJexPuKhE/s1600-h/image21.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-vZV4ye2SuBs/Vuntn_-fEuI/AAAAAAAADTQ/PhgYXx3aVxE/image_thumb10.png?imgmax=800" width="396" height="207"></a></p></blockquote>
<ul>
<li>Enter file name as “gulpfile.js” and click on OK button.</li></ul>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-I1G2ez20Zi4/Vunto_C8OEI/AAAAAAAADTU/vL3sCbvYJT4/s1600-h/image25.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-F5xV24u_B2Q/VuntpqW-MXI/AAAAAAAADTY/ovDuqqUh4nA/image_thumb12.png?imgmax=800" width="309" height="123"></a></p></blockquote>
<ul>
<li>New File “gulpfile.js” is created.</li></ul>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-AA3RmsSYE4M/Vuntqag3GRI/AAAAAAAADTc/TepIvhH23uA/s1600-h/image29.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-iIp5wzNYLE0/VuntrfFFQaI/AAAAAAAADTg/_fa6o7hfTNY/image_thumb14.png?imgmax=800" width="278" height="255"></a></p></blockquote>
<ul>
<li>Open “gulpfile.js” file and write the following code.</li></ul>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-KHoAcOCMmlA/VuntsOy2p_I/AAAAAAAADTk/yo7iHDN5uro/s1600-h/image33.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-39RKZjyL-ww/VunttDAxezI/AAAAAAAADTo/b99x7wMAPzg/image_thumb16.png?imgmax=800" width="328" height="186"></a></p></blockquote>
<blockquote>
<p>Note that using gulp.task() API we can run any JavaScritpt file.</p></blockquote>
<ul>
<li>Now our project is ready to use gulp. To verify it just open a new terminal and write the following command.</li></ul>
<blockquote><pre>gulp</pre><pre><a href="https://lh3.googleusercontent.com/-dMBGmPNXQNY/VunttucAz8I/AAAAAAAADTs/cw9veDyXQhQ/s1600-h/image37.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-cGvfJKdnNQI/VuntuuekpRI/AAAAAAAADTw/yGfDqqiSGW4/image_thumb18.png?imgmax=800" width="299" height="195"></a></pre></blockquote>
<ul>
<li>The default task will run and do nothing.</li></ul>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-hBvqDz9_vpI/VuntvOS2bbI/AAAAAAAADT0/jBnhsDxoS9A/s1600-h/image%25255B12%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Nd6IlerzXas/Vuntv-0HJAI/AAAAAAAADT4/fd494akLQr8/image_thumb%25255B8%25255D.png?imgmax=800" width="395" height="80"></a></p></blockquote>
<blockquote><pre><font face="Arial">Note that if we use different task name instead of “default” we need to change the task name. </font></pre></blockquote><pre><font face="Arial"><font color="#c0504d"><strong>Step 5 :</strong></font> In order to run our protractor script we need to install gulp-protractor plugin. </font></pre>
<ul>
<li>Open a terminal and run the following command as a development dependency.</li></ul>
<blockquote><pre>npm install --save-dev gulp-protractor</pre></blockquote>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-kLky7N016vI/VuntwnZavUI/AAAAAAAADT8/C5pF6ydzk3k/s1600-h/image46.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-2tg5Jah05PI/VuntxSq0qNI/AAAAAAAADUA/ZYrQomakB-s/image_thumb23.png?imgmax=800" width="453" height="168"></a></p></blockquote>
<ul>
<li>Now gulp-protractor plugin is installed. </li></ul>
<p><font face="Arial"><font color="#c0504d"><strong>Step 6 :</strong></font> Open “gulpfile.js” again and add the following variable.</font></p>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-LLMFuEwVNgs/VuntykrJF1I/AAAAAAAADUE/RVKThbRlb_M/s1600-h/image50.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-XmBU08U9s80/VuntzBBh6VI/AAAAAAAADUI/ADGR2X3bMvE/image_thumb25.png?imgmax=800" width="378" height="37"></a></p></blockquote>
<blockquote>
<p>Now add the following code at gulp.task() function.</p></blockquote>
<blockquote>
<p><a href="https://lh3.googleusercontent.com/-QIFRSryLTGQ/Vuntz0vwfPI/AAAAAAAADUM/fD8hXhLQaeE/s1600-h/image58.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-_J2ykq4EKYU/Vunt1DMtlGI/AAAAAAAADUQ/13fGSGC7_9c/image_thumb29.png?imgmax=800" width="367" height="107"></a></p></blockquote>
<blockquote>
<p>Here gulp.src() takes the script file name as argument. In our case test.js is the file name. We can run multiple js files. We will show you in our future post.</p>
<p>In the configFile we assign our conf.js file.</p>
<p>In the args we assign base URL and address. </p>
<p>Now “gulpfile.js” looks like the following.</p>
<p><a href="https://lh3.googleusercontent.com/-B6D7Xe-3UKo/Vunt16QNRQI/AAAAAAAADUU/dt1Ie4QQaVA/s1600-h/image%25255B13%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-W5sgCJVTykg/Vunt2shahGI/AAAAAAAADUY/bEJp0wxV--A/image_thumb%25255B9%25255D.png?imgmax=800" width="463" height="243"></a></p></blockquote>
<p><font face="Arial"><font color="#c0504d"><strong>Step 7 :</strong></font> Now go to terminal and start selenium server using the command,</font></p>
<p><img alt="[image71.png]" src="https://lh6.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600/image71.png" width="458" height="167"></p>
<p><font face="Arial">Note that it can be handled using gulp and I will show you in next post. </font></p>
<p><font face="Arial">Run the following command to run our protractor script.</font></p>
<p><font face="Courier New">gulp</font></p>
<p><a href="https://lh3.googleusercontent.com/-9JDaIh5BQsg/Vunt3Xxm_1I/AAAAAAAADUc/O3wkAFiBPGY/s1600-h/image%25255B14%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-9WKrDtBCtOc/Vunt4O8V-jI/AAAAAAAADUg/bQxDhn6pAc0/image_thumb%25255B10%25255D.png?imgmax=800" width="324" height="250"></a></p>
<p>Note that we use only the command name “gulp” in case of task name “default” as it can automatically detects the task by default. If we mention task name at gulp.task() function then we need to mention it after gulp command. </p>
<p><font face="Arial"><font color="#c0504d"><strong>Step 8 :</strong></font> Scripts will start and execute the test.</font></p>
<p><a href="https://lh3.googleusercontent.com/-c2FcK6IWmxM/Vunt4kxMUuI/AAAAAAAADUk/AZn7u9MqqhE/s1600-h/image%25255B15%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwOpUMFH9pzsVyGce1WSCIeSkG9zPLaCcfnvRhjPFMcqKdUg1bjgI0hRnJmPfH29rrNTZ3sjvFvHlIDkhtNukvC5gFgbB8PY3BR4KyIKfu39ZHTVA-s27oQKc2kiMPP3yoyFCGCt824A/?imgmax=800" width="610" height="226"></a></p>
<p>That’s all from here. We will discuss more on gulp and protractor in future.</p>
<p>Happy UI Testing with Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com1tag:blogger.com,1999:blog-5072507204718650532.post-68578824056543702522015-12-31T01:35:00.000+06:002016-03-10T04:24:52.304+06:00Protractor : How to automate AngularJS application using protractor<p>In my last post I have discussed about <a href="http://nadimsaker.blogspot.com/2015/10/what-is-protractor.html" target="_blank">protractor</a> and how to <a href="http://nadimsaker.blogspot.com/2015/11/protractor-how-to-install-protractor.html" target="_blank">setup Protractor environment</a> to run protractor test script. Here I will show you how to write protractor test script and run it using WebStorm editor.</p> <p>Sample application : Note that we use Super calculator as sample AngularJS application. URL :<a title="http://juliemr.github.io/protractor-demo/" href="http://juliemr.github.io/protractor-demo/">http://juliemr.github.io/protractor-demo/</a></p> <p><a href="https://lh3.googleusercontent.com/-pjeAUfqf5-Q/VuCiIgJhxvI/AAAAAAAADPM/m5K4J1q8Fb0/s1600-h/image4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-HUJgybMZ7Ig/VuCiJqmncAI/AAAAAAAADPQ/hbExyTCJyf4/image_thumb1.png?imgmax=800" width="369" height="124"></a></p> <p><strong>Test Cases</strong> : Verify that the application can add two numbers.</p> <ol> <li>Open the application. <li>Enter First number. <li>Select operator (+,-,*…) <li>Enter Second number. <li>Click on Go button <li>Verify the result.</li></ol> <p><strong><font color="#9b00d3">Step 1 : Create a Protractor Test project</font></strong></p> <ul> <li>Open Webstorm IDE. Note that WebStorm can be downloaded from <a href="https://www.jetbrains.com/webstorm/" target="_blank">JetBrain’s site</a>. You can use any other IDE to develop protractor scripts that supports JavaScript. <li>Welcome to WebStorm window is displayed and click on “Create New Project” link.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-bIEqAtE7adU/VuCiKTedZ4I/AAAAAAAADPU/XzIvJQENMhQ/s1600-h/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2NybuOCoSqBPpXBoSjqyel5g3pPYwitU0y5joFFxCzApJPPXCcUxLinmUy6BnMEBdCMATpryA7X6IF4f0cJ2Ao12uXVL7ydliEjZxj2z-t9xhlYZbMFXCDnfxr4gHXcYJ0ubonenGQ/?imgmax=800" width="444" height="314"></a></p></blockquote> <ul> <li>Select the project type as “Empty Project” and path. In my case path is “C:\Development\ProtractorTest”.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-NQabVX97rQM/VuCiL7vKMxI/AAAAAAAADPc/B018yjN6xYQ/s1600-h/image7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-0orfYlckX9U/VuCiM_RmD-I/AAAAAAAADPg/mjgOMcZw40k/image_thumb3.png?imgmax=800" width="517" height="363"></a></p></blockquote> <ul> <li>Click on <strong>Create</strong> button.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-opLeB06SfcM/VuCiNnDHIiI/AAAAAAAADPk/Xi3AOBk8fBM/s1600-h/image11.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-6zm0ptwDmfg/VuCiOQauIpI/AAAAAAAADPo/nrMXZOFPMW0/image_thumb5.png?imgmax=800" width="575" height="235"></a></p></blockquote> <ul> <li>Right click on Folder name “ProtratorTest” Folder and click on JavaScript File.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-_zlPRx_gmKs/VuCiPPMWAnI/AAAAAAAADPs/3sxbi2svoIk/s1600-h/image151.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-D0zuwR3cAOU/VuCiQVZ-0rI/AAAAAAAADPw/9m9iwuc8H-A/image_thumb7.png?imgmax=800" width="515" height="423"></a></p></blockquote> <ul> <li>New JavaScript File window is displayed and enter the file name “test” and click on <strong>OK</strong> button. </li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-4g4Q2y6Dtqk/VuCiRK9_QPI/AAAAAAAADP0/spRJSLuO51U/s1600-h/image19.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-AoA-fAJ-nP8/VuCiSIb0snI/AAAAAAAADP4/J5XeAgnHCNo/image_thumb91.png?imgmax=800" width="280" height="114"></a></p></blockquote> <ul> <li>Now project is ready to write test script. test.js is the file to write test.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-ukFe0rqqxOk/VuCiS_gcYyI/AAAAAAAADP8/sf43eVVO9qU/s1600-h/image413.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/--5Rj4p3YX6s/VuCiTuMqFPI/AAAAAAAADQA/KP5gefzpRMw/image41_thumb2.png?imgmax=800" width="605" height="252"></a></p></blockquote> <p><font color="#9b00d3"><strong></strong></font> </p> <p><font color="#9b00d3"><strong>Step 2 : Write test script using JavaScript</strong></font></p> <ul> <li>Write the following Script to open the application in test.js file.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-JxWns6TL3ZM/VuCiUPIntJI/AAAAAAAADQE/MLLD8U-5rgo/s1600-h/image44.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-kiZNN0-dT9E/VuCiVNJIZLI/AAAAAAAADQI/Vx9csTSB0tI/image_thumb25.png?imgmax=800" width="427" height="93"></a></p></blockquote> <blockquote> <p>Here <em>describe</em> and <em>it </em>comes from Jasmine framework. We will discuss it on future. </p></blockquote> <blockquote> <p>Common syntax of <strong>describe</strong> is,</p></blockquote> <blockquote> <p><em>describe(feature name, function(){</em></p></blockquote> <blockquote> <p><em>………</em></p></blockquote> <blockquote> <p><em>…….});</em></p></blockquote> <blockquote> <p>Common syntax for <strong>it</strong> is,</p> <p><em>it(test case title, function(){</em></p> <p><em>………….</em></p> <p><em>….});</em></p></blockquote> <blockquote> <p>In order to write a test, syntax will be,</p></blockquote> <blockquote> <p><em>describe(feature name, function(){</em></p></blockquote> <blockquote> <p><em> it(test case title, function(){…..</em></p> <p><em> …….</em></p></blockquote> <p><em> });</em></p> <blockquote> <p><em>});</em></p></blockquote> <blockquote> <p><em>browser.get(url)</em> is a protractor command to browse an application using a url given as argument.</p></blockquote> <ul> <li>Now write the following code to enter first number.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-CLm8OR7Q7sE/VuCiV-9TUQI/AAAAAAAADQM/Kw0006bgrl8/s1600-h/image45.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-s1WWHNKAbG8/VuCiWrZN-zI/AAAAAAAADQQ/T6HGCnOlAeU/image_thumb26.png?imgmax=800" width="350" height="39"></a></p> <p>Here <em>element()</em> is used to find an element and <em>by.model()</em> is a new locator in Protractor. Protractor uses some special locator to find out angularJS element beside selenium webdriver. We will discuss more on this in a separate post. </p> <p><em>sendKeys()</em> is a function to enter value/string to text box.</p></blockquote> <ul> <li>Now select an operator. In this case it will be addition (+).</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-WbuG-1Av-1Y/VuCiXIGY7TI/AAAAAAAADQU/9K_K3JvYDUs/s1600-h/image18.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-glbguH62lzA/VuCiYEDXJXI/AAAAAAAADQY/0RPmlpSEaXU/image_thumb9.png?imgmax=800" width="381" height="34"></a></p></blockquote> <ul> <li>Now write the following code to enter second number.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-_d2tqjwyvk4/VuCiY0YLS3I/AAAAAAAADQc/UpVRqDhqmCI/s1600-h/image23.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-ja91boVAuZ4/VuCiZ_Ouv3I/AAAAAAAADQg/W9ilpoadXeI/image_thumb12.png?imgmax=800" width="349" height="41"></a></p></blockquote> <ul> <li>Click on Go button.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-drz_UKL03o4/VuCiaZGcRwI/AAAAAAAADQk/qXl6AwaBzC8/s1600-h/image46.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-YEnXU8XcS6s/VuCibeXNVTI/AAAAAAAADQo/7Ri2h5fGKM0/image_thumb27.png?imgmax=800" width="279" height="41"></a></p></blockquote> <ul> <li>Verify the result.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-kQJzjf8x1eU/VuCicNoSUMI/AAAAAAAADQs/kITce6MuT3U/s1600-h/image47.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-FZfjxOkMgbQ/VuCicy4m_SI/AAAAAAAADQw/ChazgBdH7Jg/image_thumb28.png?imgmax=800" width="407" height="56"></a></p> <p>Note that we use expect(……).toEqual(…) to verify the result.</p> <p>Common syntax, </p> <p>expect(<em>actual value</em>).toEqual(<em>expected value</em>);</p></blockquote> <ul> <li>Now script of test.js file looks like the following,</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-63EePhr_NIs/VuCidYwrEiI/AAAAAAAADQ0/cy8l35BTQRU/s1600-h/image48.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-W_GNl0hpA60/VuCieaCYdoI/AAAAAAAADQ4/cD_Pw_MmTNA/image_thumb29.png?imgmax=800" width="476" height="311"></a></p></blockquote> <p> </p> <p><font color="#9b00d3"><strong>Step 3 : Run Protractor Test</strong></font></p> <ul> <li>Add a new JavaScript file named “conf.js” at the same directory. Note that conf.js is the file name only known by protractor at run time.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-9efkmGrvqRM/VuCiezQb8EI/AAAAAAAADQ8/Luz6Jepo5xQ/s1600-h/image821.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-6Mx2ysZAHQM/VuCifw6WqyI/AAAAAAAADRA/Z3d9A-fmHKs/image8_thumb.png?imgmax=800" width="302" height="119"></a></p></blockquote> <ul> <li>Open conf.js file and write the following code.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-jm6AaWzcADM/VuCigdKrvKI/AAAAAAAADRE/2MHSRdgkTA8/s1600-h/image52.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-o7MpYvmznJ0/VuCihS2PceI/AAAAAAAADRI/S6A9ktQbUvM/image_thumb31.png?imgmax=800" width="397" height="96"></a></p> <p>Here, <em>framework</em> is the framework name. We use jasmine framework here.</p> <p><em>seleniumAddress</em> is the selenium server address running on the machine.</p> <p>In my case 'http://127.0.0.1:4444/wd/hub' <br>We may write 'http://localhost:4444/wd/hub' is place of ip address.</p> <p><em>specs </em>is the JavaScript file name where scripts are written using protractor. In my case it is test.js.</p></blockquote> <ul> <li>Now open a terminal window by clicking on Terminal tab.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-KesfjceKeoY/VuCihxYhtwI/AAAAAAAADRM/Matel5YJi54/s1600-h/image59.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Tet5aUomOF4/VuCiiw2fVqI/AAAAAAAADRQ/un5u-pOJOjQ/image_thumb34.png?imgmax=800" width="373" height="105"></a></p></blockquote> <ul> <li>Terminal window look like this, </li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-wh0BNO4G8FU/VuCijr1lreI/AAAAAAAADRU/1oSOnw6nMUk/s1600-h/image63.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-vT0ymvA2PVI/VuCikVj7-KI/AAAAAAAADRY/P1JtZQC2MG0/image_thumb36.png?imgmax=800" width="374" height="149"></a></p></blockquote> <ul> <li>At First we have to start our selenium server. Write the following command and press enter key.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-WGryNPa49-s/VuCik9DKorI/AAAAAAAADRc/tkotFSwQdTo/s1600-h/image71.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-Qwp9bMQMTPY/VuCilua7XRI/AAAAAAAADRg/-Ls-VQAm2as/image_thumb40.png?imgmax=800" width="470" height="173"></a></p></blockquote> <ul> <li>Selenium sever starts.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-qfuCR7JaHa0/VuCimsSzm8I/AAAAAAAADRk/dfCM_XBs6dA/s1600-h/image77.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLd34446X4WWNy6Uj9m_RxmsIhLwr4ywozv_Fhdf2php9xyEwaxLRnwCVPELkI4dPgFFTbWR7aApRvbT5_FEDWQ69OgUNUQKy5qf9nXvapPFT7exnBFMVGMAo9xHqbLIwk-9Cn9vgzA/?imgmax=800" width="604" height="160"></a></p></blockquote> <ul> <li>Now open another terminal window by clicking (+) button</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-ulY0_1-J9c4/VuCiogi4e4I/AAAAAAAADRs/nLq1AxEAJvk/s1600-h/image811.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-iuKYwWM4p4U/VuCips7aEmI/AAAAAAAADRw/Q0yIyNqaEdE/image_thumb46.png?imgmax=800" width="608" height="160"></a> </p></blockquote> <ul> <li>Write the following command and press enter key.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-WVBvASyyabc/VuCiqd1sGLI/AAAAAAAADR0/VhVaFNgxwKQ/s1600-h/image85.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-jtiJVBH2aNI/VuCirP9LzmI/AAAAAAAADR4/joXfcEPJ-qY/image_thumb48.png?imgmax=800" width="496" height="232"></a></p></blockquote> <ul> <li>Scripts starts running and it opens the application and execute the steps. <li>It shows the results in terminal window.</li></ul> <blockquote> <p><a href="https://lh3.googleusercontent.com/-I4gJxPCu-zE/VuCir74M9eI/AAAAAAAADR8/qE9dt5FxTJE/s1600-h/image41.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://lh3.googleusercontent.com/-EWjLI2WiVDE/VuCisq0DJJI/AAAAAAAADSA/zxP0AFp0bC0/image_thumb1%25255B1%25255D.png?imgmax=800" width="432" height="107"></a></p></blockquote> <blockquote> <p>Note that we can use command prompt in place of Terminal window to run protractor script. Same command will be used and in that case we need to change the directory where test.js and conf.js file is located.</p></blockquote> <p>In our future post we will discuss more on protractor. </p> <p>Happy UI Testing with Protractor!!!</p>Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-56203104189630625072015-11-20T01:24:00.000+06:002015-11-20T01:45:56.280+06:00Protractor : How to install protractor environment?<a href="http://nadimsaker.blogspot.com/2015/10/what-is-protractor.html" target="_blank">Protractor</a> is a end to end test framework for automating AngularJS application that has special angular element locating feature and it can automatically control the waiting time between two steps which selenium needs to handle using different <a href="http://nadimsaker.blogspot.com/2014/08/how-to-use-implicit-and-explicit-wait.html" target="_blank">implicit and explicit wait</a> technique.<br>In our previous post we have discussed about <a href="http://nadimsaker.blogspot.com/2015/10/what-is-protractor.html" target="_blank">Protractor</a> and its features. Now how we can install protractor in our windows machine will be discussed here.<br><strong><br></strong><strong>Prerequisites : </strong><br><strong>Node.js</strong> : Protractor is a Node.js program. So we need to install Node.js before installing protractor.<br><strong>Jasmine</strong> : Protractor uses Jasmine Framework by default. It is not needed to install Jasmine separately.<br><strong>Java Development Kit (JDK) :</strong> For running selenium Standalone server it is needed to install JDK.<br><strong><br></strong><strong>Step 1 : Install JDK</strong><br>How to install JDK is found in my another <a href="http://nadimsaker.blogspot.com/2015/02/how-to-install-java-runtime-environment.html" target="_blank">post</a>. Also you can visit to Java download <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">page</a> to download and install JDK. You can also take help from this <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">link</a> to install JDK<br><strong><br></strong><strong>Step 2 : Install Node.js application </strong><br>Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It is lightweight and efficient.<br> <ul> <li>Go to Node.js download page <a title="https://nodejs.org/en/download/" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a> <li>Click on the installer for windows.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-Mdna9Eby0wc/Vk4jcWg8LoI/AAAAAAAADDU/fiuFiClwWw8/s1600-h/image7%25255B1%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-qgrZVUOZpDw/Vk4jdXztiYI/AAAAAAAADDc/HbY630Hgbrk/image_thumb3.png?imgmax=800" width="329" height="99"></a></blockquote> <ul> <li>Double click on the installer file. In my case it is “node-v5.0.0-x86.msi”. A pop up window is displayed. <li>Click on <strong>Run</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-RNWxjAjH5M0/Vk4jeNhwZGI/AAAAAAAADDk/_UQlp0KJIdI/s1600-h/image10.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-VxYllNlBcFo/Vk4je4dzJAI/AAAAAAAADDs/4FO010XXEAI/image_thumb4.png?imgmax=800" width="244" height="186"></a></blockquote> <ul> <li>Node.js setup window is displayed. Click on <strong>Next</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-0zKceMA3srs/Vk4jfu8PQ6I/AAAAAAAADDw/pgVw_nber9w/s1600-h/image17.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-flJ8_yd5JD4/Vk4jgUUwf5I/AAAAAAAADD8/GU6HZzYbeWI/image_thumb7.png?imgmax=800" width="424" height="333"></a></blockquote> <ul> <li>Check on the checkbox named “I accept the terms in the License agreement”. Click on <strong>Next</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-pkIsiEazjgw/Vk4jhGR7JDI/AAAAAAAADEE/AROgM-Z8zjU/s1600-h/image28.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-3FjCCTFgClo/Vk4jh9ekqgI/AAAAAAAADEI/3maOnmE5O28/image_thumb12.png?imgmax=800" width="292" height="230"></a></blockquote> <ul> <li>Keep the destination path same in this window and click on <strong>Next</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-X6SjRPT-nUM/Vk4jjFzx5WI/AAAAAAAADEQ/35ZRrf8a2MI/s1600-h/image39.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-w83H6LtN3mM/Vk4jkLGTIXI/AAAAAAAADEY/hLArQyOusDs/image_thumb17.png?imgmax=800" width="286" height="223"></a></blockquote> <ul> <li>Click on <strong>Next</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-lbG2t0-qvQY/Vk4jk-TU2mI/AAAAAAAADEg/HyltiEM9sFQ/s1600-h/image35.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-MDVRHpwoKYk/Vk4jlnbkVQI/AAAAAAAADEo/S54mMt9NC80/image_thumb15.png?imgmax=800" width="362" height="287"></a></blockquote> <ul> <li>Click on <strong>Install</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-i8sHAG5CZgI/Vk4jmc-qgBI/AAAAAAAADEw/l8jIltRXC0o/s1600-h/image43.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Ftcn92dKHFo/Vk4jntPZZpI/AAAAAAAADE8/R90Lcw4jCds/image_thumb19.png?imgmax=800" width="352" height="277"></a></blockquote> <ul> <li>A pop up window is displayed and click on <strong>Yes</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-t5qWUNev8Bg/Vk4joKQJCpI/AAAAAAAADFE/9xud6bHAoeI/s1600-h/image57.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Ou60bOiH9is/Vk4jpUtsebI/AAAAAAAADFM/-edVZlIvGL4/image_thumb25.png?imgmax=800" width="282" height="165"></a></blockquote> <ul> <li>Installation starts.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-ZmobHZFtcuo/Vk4jqL5prOI/AAAAAAAADFU/vSUQw5FaZnM/s1600-h/image46.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-U19Lo5FCaxw/Vk4jrOWe-8I/AAAAAAAADFc/LvuxwTnXX6A/image_thumb20.png?imgmax=800" width="244" height="190"></a></blockquote> <ul> <li>Click on <strong>Finish</strong> button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-VOduvW4Na1o/Vk4jrru9uVI/AAAAAAAADFg/jwlbMH4xlwI/s1600-h/image60.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-FSEv6Bcqsmk/Vk4jsc6c0jI/AAAAAAAADFs/unAVV1sqnVQ/image_thumb26.png?imgmax=800" width="244" height="192"></a></blockquote> <ul> <li>Node.js installation is now complete. <li>In order to verify that node.js is installed properly, open command prompt window by writing “cmd” text in the run text box and press Enter key from Keyboard.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-jmwjK-BrwUU/Vk4jtFr7H3I/AAAAAAAADF0/DZJaH6jPQd8/s1600-h/image53.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-sVuBgYImY-4/Vk4jt5Dn2OI/AAAAAAAADF8/G6YZJjBlnqo/image_thumb23.png?imgmax=800" width="244" height="95"></a></blockquote> <ul> <li>Command prompt window is displayed and type the following command.</li></ul> <blockquote> <p>node –version</p> <p> <a href="http://lh3.googleusercontent.com/-coSHBR8hiQA/Vk4jur_y_8I/AAAAAAAADGE/IkG-BV0VYkE/s1600-h/image64.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-nDi1ux6jRmo/Vk4jvrUsJII/AAAAAAAADGM/zoXkf5ZbL0w/image_thumb28.png?imgmax=800" width="343" height="178"></a></p></blockquote> <ul> <li>Inspect that node.js version 5.0.0 is displayed. </li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-FK8HsbORDgc/Vk4jwGOEuzI/AAAAAAAADGU/toKXIZrKWIY/s1600-h/image68.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZuhJcmGTqdmMNcgoaivRmlfqI6yf97XYzsoWI1RI2OPNQGxITrdvu-dCe8v2kCipBo2XYflSOOt9vALprfCj9bhtMgLx7eydwd1HqyH5MeD-b_mKjutc_TU9mVz7Qxgw0NxYH-9D3yw/?imgmax=800" width="328" height="169"></a></blockquote> <ul> <li>It is proved that node.js is installed properly.</li></ul><strong>Step 3 : Install Protractor </strong><br> <ul> <li>Open Command prompt typing the text “cmd” at run text box and press enter button.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-EInmOOrxnzQ/Vk4jxtMJ0EI/AAAAAAAADGg/SGpif9Oao7c/s1600-h/image2.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-JYdhTY5CLfY/Vk4jydWvyNI/AAAAAAAADGo/SakoafkYQ10/image_thumb.png?imgmax=800" width="244" height="70"></a></blockquote> <ul> <li>Command prompt window is displayed.</li></ul> <blockquote><a href="http://lh3.googleusercontent.com/-ht9e3zxau-k/Vk4jzFKFH0I/AAAAAAAADG0/UJyf_RHRawQ/s1600-h/image11.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-jjNdebo5gGU/Vk4jz4S8-nI/AAAAAAAADG4/Ymva_fr1iM0/image_thumb5.png?imgmax=800" width="371" height="190"></a></blockquote> <ul> <li>Type the following command to install protractor globally. Note that it installs two command line tools – protractor and webdriver-manager. It also installs Protractor API (library).</li></ul> <blockquote><pre><code>npm install -g protractor</code></pre><pre><a href="http://lh3.googleusercontent.com/-Qwdd-lT5gmw/Vk4m7IjJVTI/AAAAAAAADIo/ZzuyxELwWdM/s1600-h/image7%25255B1%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-r9O3iaPRpw0/Vk4j1XYO-jI/AAAAAAAADIw/I0iNVCGBEgg/image7_thumb.png?imgmax=800" width="380" height="197"></a></pre><br /><p>Note that we use “–g” in the command line to install protractor globally.</p></blockquote><br /><ul><br /><li>Press Enter key. <br /><li>Protractor starts installing.</li></ul><br /><blockquote><a href="http://lh3.googleusercontent.com/-sYGybpgKq9M/Vk4j1-bN-GI/AAAAAAAADHQ/tmvCvQTsR58/s1600-h/image16.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-07TdIlFsnX4/Vk4j23R7JXI/AAAAAAAADHc/A3Pxnaak1uU/image_thumb8.png?imgmax=800" width="401" height="206"></a></blockquote><br /><ul><br /><li>After finishing installation type the following command to verify that protractor has been installed successfully.</li></ul><br /><blockquote>protractor --version</blockquote><br /><blockquote><a href="http://lh3.googleusercontent.com/-dI-4dnjmdgQ/Vk4j3ydUsKI/AAAAAAAADHk/wFo7IH6F-hU/s1600-h/image21.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Gg-wmvoLOt0/Vk4j4z0WRqI/AAAAAAAADHs/o1fYXMBiWVI/image_thumb11.png?imgmax=800" width="385" height="195"></a></blockquote><br /><ul><br /><li>Press Enter key. <br /><li>It shows the protractor version. It means that protractor has been installed successfully.</li></ul><br /><blockquote><a href="http://lh3.googleusercontent.com/-vnLZvsIMZ28/Vk4j5QehQ7I/AAAAAAAADH0/J7xxmLAO8XY/s1600-h/image%25255B4%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-cfVDEQWgjdI/Vk4j6eNxh9I/AAAAAAAADH8/Tb2M3CLRS00/image_thumb%25255B2%25255D.png?imgmax=800" width="297" height="113"></a></blockquote><br /><ul><br /><li>Now type the following update command that will install standalone selenium server and ChromeDriver.</li></ul><br /><blockquote><pre><code>webdriver-manager update</code></pre></blockquote><br /><blockquote><a href="http://lh3.googleusercontent.com/-DGeRzMiVrrU/Vk4j7On-r6I/AAAAAAAADIA/R-DvZ3EBOM0/s1600-h/image%25255B8%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-xozA-cCwonY/Vk4j8KZazFI/AAAAAAAADIM/oygw1PlXXNg/image_thumb%25255B4%25255D.png?imgmax=800" width="329" height="91"></a></blockquote><br /><ul><br /><li>Press enter key and it starts installing.<br /><li>After finishing installation run the standalone selenium server to verify that it is running. We need to run it before executing protractor test script. The command will be,</li></ul><br /><blockquote>webdriver-manager start</blockquote><br /><blockquote style="margin-right: 0px" dir="ltr"><a href="http://lh3.googleusercontent.com/-GOW7KN0vXO8/Vk4j851ogUI/AAAAAAAADIU/aXIzx4xmqag/s1600-h/image%25255B18%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-lm11S3S9gXo/Vk4j98bnqAI/AAAAAAAADIc/4-8bfz-nrfk/image_thumb%25255B9%25255D.png?imgmax=800" width="356" height="71"></a><br>Now our environment is ready to run protractor test script. So it’s time for writing protractor test. Our next post will be on that topic. </blockquote><br /><blockquote style="margin-right: 0px" dir="ltr">Happy UI Testing with Protractor!!!</blockquote> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-43872489423366703732015-10-31T03:25:00.000+06:002015-11-06T03:30:03.350+06:00Node.js : How to install node.js installer in windows machine<p>Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It is lightweight and efficient.</p> <ul> <li>Go to Node.js download page <a title="https://nodejs.org/en/download/" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a></li> <li>Click on the installer for windows.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-WhfxtV8xFI8/VjvKCxmlADI/AAAAAAAAC_o/GLP4wfew9zY/s1600-h/image_thumb%25255B3%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[3]" border="0" alt="image_thumb[3]" src="http://lh3.googleusercontent.com/-mdD5RwSaafo/VjvKDkTebDI/AAAAAAAAC_w/fryXnd5T7Io/image_thumb%25255B3%25255D_thumb.png?imgmax=800" width="329" height="99"></a></p></blockquote> <ul> <li>Double click on the installer file. In my case it is “node-v5.0.0-x86.msi”. A pop up window is displayed.</li> <li>Click on <strong>Run</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-ELtAZGGmRdM/VjvKEqoxR0I/AAAAAAAAC_4/N6TV1ofj4vs/s1600-h/image_thumb%25255B4%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[4]" border="0" alt="image_thumb[4]" src="http://lh3.googleusercontent.com/-9dZFRlzQm20/VjvKFWdM4sI/AAAAAAAADAA/xCY0ngUU1Dk/image_thumb%25255B4%25255D_thumb.png?imgmax=800" width="244" height="186"></a></p></blockquote> <ul> <li>Node.js setup window is displayed. Click on <strong>Next</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-0dddQfCcQ3w/VjvKGIaC6FI/AAAAAAAADAI/reYJ7Ldv4OM/s1600-h/image_thumb%25255B7%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[7]" border="0" alt="image_thumb[7]" src="http://lh3.googleusercontent.com/-z0ECUmdoAck/VjvKGyj8LGI/AAAAAAAADAQ/2BT-vC1TVTU/image_thumb%25255B7%25255D_thumb.png?imgmax=800" width="424" height="333"></a></p></blockquote> <ul> <li>Check on the checkbox named “I accept the terms in the License agreement”. Click on <strong>Next</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-Zc9rdfxZm8w/VjvKHh-RppI/AAAAAAAADAU/sNkQpER0gSQ/s1600-h/image_thumb%25255B12%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[12]" border="0" alt="image_thumb[12]" src="http://lh3.googleusercontent.com/-RMhSlIACzgg/VjvKIWYbcCI/AAAAAAAADAg/zd-mq1tnO58/image_thumb%25255B12%25255D_thumb.png?imgmax=800" width="292" height="230"></a></p></blockquote> <ul> <li>Keep the destination path same in this window and click on <strong>Next</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-9mu3GBBcnDE/VjvKJGf-UKI/AAAAAAAADAk/17Y1JIwf3UQ/s1600-h/image_thumb%25255B17%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[17]" border="0" alt="image_thumb[17]" src="http://lh3.googleusercontent.com/-GlvQmO1mUQ4/VjvKJ8qhYlI/AAAAAAAADAw/fKA4aXxWRe8/image_thumb%25255B17%25255D_thumb.png?imgmax=800" width="286" height="223"></a></p></blockquote> <ul> <li>Click on <strong>Next</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-TpOkauhL4rU/VjvKKnqUEyI/AAAAAAAADA4/GLiAbzhyLHQ/s1600-h/image_thumb%25255B15%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[15]" border="0" alt="image_thumb[15]" src="http://lh3.googleusercontent.com/-LZDbcl7R6h0/VjvKLSiiFaI/AAAAAAAADBA/Er2m50RY3w4/image_thumb%25255B15%25255D_thumb.png?imgmax=800" width="362" height="287"></a></p></blockquote> <ul> <li>Click on <strong>Install</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-ma8dqeHaIBE/VjvKMDlKGyI/AAAAAAAADBI/J9km-eRIvZY/s1600-h/image_thumb%25255B19%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[19]" border="0" alt="image_thumb[19]" src="http://lh3.googleusercontent.com/-7TnV0mpRmHo/VjvKM8TYmjI/AAAAAAAADBM/omyIBHNmMYk/image_thumb%25255B19%25255D_thumb.png?imgmax=800" width="352" height="277"></a></p></blockquote> <ul> <li>A pop up window is displayed and click on <strong>Yes</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-EcPe0VJ6TP0/VjvKNsZf0eI/AAAAAAAADBU/ZgbvYSTEH3U/s1600-h/image_thumb%25255B25%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[25]" border="0" alt="image_thumb[25]" src="http://lh3.googleusercontent.com/-W6jPV01uxXU/VjvKPIAWY7I/AAAAAAAADBg/Nz705dx1zDE/image_thumb%25255B25%25255D_thumb.png?imgmax=800" width="282" height="165"></a></p></blockquote> <ul> <li>Installation starts.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-x57BSncoWMQ/VjvKQBDdI1I/AAAAAAAADBo/jr1GMgULjF4/s1600-h/image_thumb%25255B20%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[20]" border="0" alt="image_thumb[20]" src="http://lh3.googleusercontent.com/-UkcYO6zdDPU/VjvKQx1YBwI/AAAAAAAADBw/gTA5jDBlPcM/image_thumb%25255B20%25255D_thumb.png?imgmax=800" width="244" height="190"></a></p></blockquote> <ul> <li>Click on <strong>Finish</strong> button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-pdaFjKHObDU/VjvKRgpPNkI/AAAAAAAADB4/VZjVHo9CaM0/s1600-h/image_thumb%25255B26%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[26]" border="0" alt="image_thumb[26]" src="http://lh3.googleusercontent.com/-nAUd_IH3234/VjvKSYAGOrI/AAAAAAAADCA/8pEWc0MuhO0/image_thumb%25255B26%25255D_thumb.png?imgmax=800" width="244" height="192"></a></p></blockquote> <ul> <li>Node.js installation is now complete.</li> <li>In order to verify that node.js is installed properly, open command prompt window by writing “cmd” text in the run text box and press Enter key from Keyboard.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-NW0x8XYXc9E/VjvKSzSRRsI/AAAAAAAADCE/j3hzQ5KfHv8/s1600-h/image_thumb%25255B23%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[23]" border="0" alt="image_thumb[23]" src="http://lh3.googleusercontent.com/-W-mxrz_zyn8/VjvKTpit4pI/AAAAAAAADCQ/rFec0QWMViQ/image_thumb%25255B23%25255D_thumb.png?imgmax=800" width="244" height="95"></a></p></blockquote> <ul> <li> Command prompt window is displayed and type the following command.</li></ul> <blockquote> <p>node –version</p> <p> <a href="http://lh3.googleusercontent.com/-tiZnFyyZYRo/VjvKUTqF8qI/AAAAAAAADCU/0_1PmxxbFsY/s1600-h/image_thumb%25255B28%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[28]" border="0" alt="image_thumb[28]" src="http://lh3.googleusercontent.com/-VU13dUyPD4c/VjvKVOF9P2I/AAAAAAAADCg/lN4f8_GB7V8/image_thumb%25255B28%25255D_thumb.png?imgmax=800" width="343" height="178"></a></p></blockquote> <ul> <li>Inspect that node.js version 5.0.0 is displayed. </li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-vYv3mt27gSs/VjvKVqbChXI/AAAAAAAADCk/xKpC-hi1N0Y/s1600-h/image_thumb%25255B30%25255D%25255B2%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image_thumb[30]" border="0" alt="image_thumb[30]" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPjkhwbtlZjz0NcB_abDxLkyFVcNuk009v0YGtT45SSZRt1XnOIfQADZA1z4ddy0lhMunnZw2ulsSDfXj7mqVB1hN-_YPqlfXiRTGj-XXQy6jI-zv6WppwDkn7W32nKW4DYrv8iF7Vg/?imgmax=800" width="328" height="169"></a></p></blockquote> <ul> <li>It is proved that node.js is installed properly.</li></ul> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-82459330959215372112015-09-30T00:18:00.000+06:002015-10-18T01:35:00.967+06:00Protractor : What is Protractor?<p>Protractor is an AngularJS end to end (EtoE) testing framework used in automating AngularJS application. It has been introduced from AngularJS 1.2. It is a replacement of EtoE test framework ngScenario.</p> <p><strong>Features</strong>:</p> <ul> <li>Protractor is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with the application. <li>Protractor supports Angular-specific locator strategies. It helps to locate angular specific element. <li>There is no need to add any wait or sleep statement. Protractor can automatically handle page loading time and waits for next steps until the present steps task is finished. <li>Protractor is a <a href="http://nodejs.org/">Node.js</a> program built on top of <a href="https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs">WebDriverJS</a> and Selenium Server. <li>It allows running test on remote addressed but need not to have the test file on server. <li>It has its own test runner. <li>It can use Jasmine or Mocha to run test suites. <li>It supports Cucumber test frameworks. <li>Protractor works in conjunction with Selenium to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device.</li></ul> <p>In our next post we will show on how we can install protractor and run a protractor test on our machine.</p> <p>Happy End to End testing with Protractor!!!</p> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com1tag:blogger.com,1999:blog-5072507204718650532.post-73040190673160251492015-08-31T02:38:00.000+06:002015-09-04T05:58:01.236+06:00Gatling : How to perform a simple load testing using Gatling<p align="justify">Gatling is a load and stress testing tool with high performance based on Scala. In our previous post we have discussed on <a title="What is Gatling" href="http://nadimsaker.blogspot.com/2015/08/gatling-what-is-gatling.html" target="_blank">Gatling</a> and <a title="Gatling : Things to know to work with Gatling" href="http://nadimsaker.blogspot.com/2015/08/gatling-things-to-know-to-work-with.html" target="_blank">things to know to work with Gatling</a>. In our last post we have shown on <a title="Gatling : How to download and install Gatling and its folder structure" href="http://nadimsaker.blogspot.com/2015/08/gatling-how-to-download-and-install.html" target="_blank">how to install and run Gatling</a> and its folder structure. Now we will discuss on how we can conduct a simple load test using Gatling. </p> <p align="justify">We will do load testing on the following test case. </p> <ol> <li>Open the Browser and go to the site : <a href="http://www.bing.com/">http://www.bing.com/</a> <li>Enter the text “Gatling” at search text box <li>Click Search button and Gatling related page with link is displayed <li>Click on the link text “Gatling - Official Site”.</li></ol> <p>In Gatling, we call this test cases as scenario that needs to test load and stress. Scenario is the real user activity on the application.</p> <p align="justify"><strong><font color="#0000ff">Step 1 : Configure Browser</font></strong></p> <p align="justify">In order to record our scenario using Gatling, we need to configure our browser proxy settings at first. The following steps will show you how to configure chrome browser for Gatling recording.</p> <ul> <li> <div align="justify">Open the Chrome Browser.</div> <li> <p>Click on <strong>Customize and control Google chrome</strong> button located at top right corner. A drop down menu is displayed.</p> <blockquote> <p><a href="http://lh3.googleusercontent.com/-w_HLBkKIuN0/VXdtHee3sLI/AAAAAAAACbw/v1aI2PnjUeY/s1600-h/image%25255B45%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-OE6vSLmlmZU/VXdtIZPSrSI/AAAAAAAACb4/1mQb4jo4_E4/image_thumb%25255B24%25255D.png?imgmax=800" width="220" height="177"></a></p></blockquote> <ul> <li>Click on Settings option</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-or3jNNYZq7s/VXdtJROskII/AAAAAAAACcA/eo-EDuEo6oQ/s1600-h/image%25255B52%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-shc-uas7Kd4/VXdtKQc1D9I/AAAAAAAACcI/f46jYXB9Rm8/image_thumb%25255B27%25255D.png?imgmax=800" width="161" height="273"></a></p></blockquote> <ul> <li>Settings page is displayed. <li>Scroll down to the bottom of the page and click on <strong>Show Advanced Settings</strong> link to expand the page.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-QXO8fl3RhmM/VXdtLtQRo0I/AAAAAAAACcQ/2zA-OIa8KD0/s1600-h/image%25255B56%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-WojPBNYKHRQ/VXdtNdmVD4I/AAAAAAAACcY/YPkgdDeeMOE/image_thumb%25255B29%25255D.png?imgmax=800" width="342" height="341"></a></p></blockquote> <ul> <li>Click on <strong>Change Proxy Settings…</strong></li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-Sb31cFaTIDE/VXdtP9cKUfI/AAAAAAAACcg/ciakXfdXvls/s1600-h/image%25255B61%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-uW8z4x1di24/VXdtRNjghJI/AAAAAAAACco/KJvTS-rGuTw/image_thumb%25255B32%25255D.png?imgmax=800" width="389" height="340"></a></p></blockquote> <ul> <li>Internet Properties window is displayed and click on Connections tab. <li>Click on LAN Settings button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-10iXze4FFSs/VXdtSeT_SAI/AAAAAAAACcw/TQYc1mz9f6k/s1600-h/image%25255B65%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-VLNufbtUr5o/VXdtTRKFDwI/AAAAAAAACc4/hivTgnGMLrU/image_thumb%25255B34%25255D.png?imgmax=800" width="285" height="363"></a></p></blockquote> <ul> <ul> <ul> <ul></ul></ul></ul> <li>LAN Settings window is displayed <li>Uncheck “Automatically detect settings” <li>Check the “Use the proxy server for your LAN” options <li>Type address as “localhost” and port as “8080” <li>Click OK button of the LAN Settings window</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/--D-ijAdwps0/VXdtUPiWvwI/AAAAAAAACdA/ml1mhY6b7Tk/s1600-h/image%25255B70%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-SD4qZfL_CaI/VXdtVO8EMZI/AAAAAAAACdI/nYU2Y9peJuE/image_thumb%25255B35%25255D.png?imgmax=800" width="427" height="372"></a></p></blockquote> <ul> <li>Click OK button of Internet Options window <li>Close the browser window.</li></ul></li></ul> <p align="justify">In case of other browsers almost same steps can be followed. For more details you can see one of my post on <a title="How to configure your browser proxy connection for recording HTTP request" href="http://nadimsaker.blogspot.com/2015/06/jmeter-how-to-configure-your-browser.html" target="_blank">browser proxy settings</a>.</p> <p align="justify"><strong><font color="#0000ff">Step 2 : Recording the Scenario</font></strong></p> <ul> <li> <p>Go to the bin folder (in my case : C:\gatling-charts-highcharts-bundle-2.1.7\bin) of Gatling bundle.</p> <li>Double click on the <strong>“recorder.bat”</strong> file.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-KvaPTt0XXEw/Vd4oIgZZTJI/AAAAAAAAC2s/-R5CFzPXf60/s1600-h/image%25255B41%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Gqfw7zAgqDI/Vd4oJRDOb_I/AAAAAAAAC20/swjYCFrfLjE/image_thumb%25255B21%25255D.png?imgmax=800" width="487" height="123"></a></p></blockquote> <ul> <li>A command prompt window is displayed.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-wvRJINHE3RA/Vd4oKDqiwAI/AAAAAAAAC28/H56OhqzWamQ/s1600-h/image%25255B44%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-5Yh_neYGBTU/Vd4oLA4O5dI/AAAAAAAAC3E/8l76RwAUW6k/image_thumb%25255B22%25255D.png?imgmax=800" width="244" height="140"></a></p></blockquote> <ul> <li>Recorder window is displayed.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-NOKYhqcMT6Q/VejdToit7JI/AAAAAAAAC4g/-h1wiTkE09Q/s1600-h/image3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-iM3024--E_M/VejdU2xp6YI/AAAAAAAAC4o/xudsFY_0HL4/image_thumb1.png?imgmax=800" width="544" height="274"></a></p></blockquote> <ul> <li>Enter the port number in the local host box ( In my case 8080). <li>Enter Package name as “search” <li>Enter class name as “BingSearch”. <li>Check “Follow Redirects”, “Infer HTML resources”, “Remove Cache Headers” and “Automatic Referrers” options. <li>Select the output files path. In my case (C:\gatling-charts-highcharts-bundle-2.1.7\user-files\simulations). Note that it is good to select <strong>simulation</strong> folders by default so that user does not need to copy the recorder file at the time of load testing. <li>Keep all the other options same. Don’t change any existing options. <li>Click on Start button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-sw07aubatcM/VejdWdvwSBI/AAAAAAAAC4w/mJS-9Bw8aLM/s1600-h/image9.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-hJFespueOus/VejdXtmiHHI/AAAAAAAAC44/KI3CMT_rCnY/image_thumb5.png?imgmax=800" width="663" height="318"></a></p></blockquote> <ul> <li>Open Google chrome browser. <li>Go to the URL : <a href="http://www.bing.com/">http://www.bing.com/</a> <li>Enter the text “Gatling” at search text box <li>Click Search button.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-oMtYE8saKtY/VejdY15im0I/AAAAAAAAC5A/llqULORUQZQ/s1600-h/image13.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEcsLhKCJlLtIB8BOne74qLpdTAaxFT7VW5yMut5rKsj46bu7rmeL3pUBsSSNg4CaZaEIgC609APhEU6IMA7d9blRlB00SgVfFr8kax4FTNlX7rjK58xaEIv-ppUyonWAzbWm8VH6ew/?imgmax=800" width="581" height="331"></a></p></blockquote> <ul> <li>Gatling related page with link is displayed <li>Click on the link text “Gatling - Official Site”.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-UK3oK6n8BP0/VejdcsHTWDI/AAAAAAAAC5Q/z5k4ZW32msM/s1600-h/image17.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-pU_sVkLedvE/VejdeBd4PCI/AAAAAAAAC5Y/A3bp_iXpbXQ/image_thumb9.png?imgmax=800" width="428" height="225"></a></p></blockquote> <ul> <li>Close the browser. <li>Click on “Stop & save” button and Gatling recorder window is closed.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-DBhXpWKi2Q4/VejdfHwTP9I/AAAAAAAAC5g/aQG9TDsBWaM/s1600-h/image21.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-rwoZWpaDupg/VejdgRzFdCI/AAAAAAAAC5o/3m6WWzE--xc/image_thumb11.png?imgmax=800" width="505" height="275"></a></p></blockquote> <ul> <li>Recorder file named “BingSearch.scala” is saved created and saved to “C:\gatling-charts-highcharts-bundle-2.1.7\user-files\simulations\search” directory. </li></ul> <blockquote> <p>Note that file name is the class name with extension .scala and it is located at folder named “search” that is same as the package name that we entered at the recorder window. This folder structure should be followed for load testing.</p> <p><a href="http://lh3.googleusercontent.com/-vq6FHFd5oG8/VejdhaGK3QI/AAAAAAAAC5w/-FBuzyXXJoA/s1600-h/image25.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-skFljuUGy7A/VejdpvZHXdI/AAAAAAAAC54/-msWKNWiOa8/image_thumb13.png?imgmax=800" width="562" height="141"></a></p></blockquote> <ul> <li>If we open the scala file by notepad++ it displays script using Scala programming language. We will discuss more on scala script in our future post. <li>We can configure user through this script. By default it sets load for single user. It has setUp() method to configure user.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-mL4yUpzo24s/VejeJ467XeI/AAAAAAAAC6A/pC5Dnt8242E/s1600-h/image5.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-O18AoiqVOWs/VejeLrvWQ_I/AAAAAAAAC6I/OwSEWAi1sTA/image_thumb2.png?imgmax=800" width="412" height="127"></a></p> <p>In our future post we will show how we can modify the script to configure different load.</p></blockquote> <p align="justify"><strong><font color="#0000ff">Step 3 : Executing load testing using Gatling</font></strong></p> <ul> <li>Go to the bin folder (in my case : C:\gatling-charts-highcharts-bundle-2.1.7\bin) <li>Double click on the <strong>“gatling.bat”</strong> file. <p><a href="http://lh3.googleusercontent.com/-KVk_9FzO_VY/Vd4oNtC6S6I/AAAAAAAAC3c/Tu1exFYThk8/s1600-h/image%25255B52%25255D.png"><img title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-BKD9ZmJg3kM/Vd4oOeHiKBI/AAAAAAAAC3k/4N-bcL5R7JA/image_thumb%25255B26%25255D.png?imgmax=800" width="389" height="97"></a> </p> <li>A command prompt window is displayed and then load testing instructions are displayed on the command prompt window. In our case, it shows the test name as “BingSearch.scala” at the command prompt. And the command prompt displays the series of instructions. <li>Command prompt window look like the following now.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-Sf81MykE_rA/VejeM7AKckI/AAAAAAAAC6Q/diW4mWYxTlE/s1600-h/image30.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-qhVI5f8HZz8/VejeN-XkmPI/AAAAAAAAC6Y/FK5iid9Mi0o/image_thumb16.png?imgmax=800" width="601" height="260"></a></p></blockquote> <ul> <li>Since there is only one simulation file default simulation id is “bingsearch”. So enter this name and press Enter key.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-IOSwmyqV6ZY/VejeO0t-kgI/AAAAAAAAC6g/6J30TbEg468/s1600-h/image39.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-B4T3wajnUlw/VejeQH63OgI/AAAAAAAAC6o/ksGzpeokz2g/image_thumb21.png?imgmax=800" width="612" height="107"></a></p></blockquote> <ul> <li>After pressing Enter key from keyboard, this window look like the following. It ask for optional run description.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-cTS3AhpNROk/VejeROjA1sI/AAAAAAAAC6w/aQcdDxgR0Gk/s1600-h/image43.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-q1hEUCXUulg/VejeSGu9X2I/AAAAAAAAC64/znCBk04u-V4/image_thumb23.png?imgmax=800" width="608" height="117"></a></p></blockquote> <ul> <li>Most of the cases run description will be the objective or title of the test cases. Number of users and nature of load. It is mean that anybody can understand about the goal of the load test to read this description. <li>In my case, “Search a word by Bing. Number of User : 1”. Press Enter key.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-A5DusRAx4c8/VejeSzmYOBI/AAAAAAAAC7A/tcF9m8qpIrE/s1600-h/image41.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-3b4yN7fIddQ/VejeTyHPpnI/AAAAAAAAC7I/s2WJkL27Zmw/image_thumb11%25255B1%25255D.png?imgmax=800" width="469" height="111"></a></p></blockquote> <ul> <li>After pressing Enter key simulation starts.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-rY1hJa7Bt0U/VejeU0VPODI/AAAAAAAAC7Q/3K7UACLU-Mw/s1600-h/image12.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-bqhoFKk7qtQ/VejeVwtRkbI/AAAAAAAAC7Y/8ekoE1RoGLY/image_thumb51.png?imgmax=800" width="486" height="215"></a></p></blockquote> <ul> <li>After finishing simulation it displays the result link that generate report in HRML format.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-zPr5Tnksi7g/VejeW5jGGCI/AAAAAAAAC7g/0racEHgcdaM/s1600-h/image171.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Mcoy4OwoqCU/VejeYTM6bNI/AAAAAAAAC7k/aXiiH7ppZec/image_thumb8.png?imgmax=800" width="555" height="211"></a></p></blockquote> <ul> <li>Copy the report path and press enter key to close the command prompt window. <li>Go to the result path (In my case : C:\gatling-charts-highcharts-bundle-2.1.7\results\bingsearch-1441322261378) and it shows the sets of html file.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-3U4f0wRrkCM/VejeZv_JdbI/AAAAAAAAC7w/ll3WKhx2zPU/s1600-h/image%25255B4%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-V1WHT_tKyT4/VejebIqu86I/AAAAAAAAC74/K3nP1XV1LZg/image_thumb%25255B1%25255D.png?imgmax=800" width="523" height="248"></a></p></blockquote> <ul> <li>Double click index.html file to open the report and it opens the report in chrome browser.</li></ul> <blockquote> <p><a href="http://lh3.googleusercontent.com/-hyGsS7Ok6bM/VejedFKdDyI/AAAAAAAAC8A/XjyTvutkwRY/s1600-h/image%25255B8%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-gyyGJDUKTLY/VejefjGELEI/AAAAAAAAC8I/XmwBEgr7DIs/image_thumb%25255B3%25255D.png?imgmax=800" width="530" height="276"></a></p></blockquote> <blockquote> <p>We will discuss details on report feature in our future post.</p></blockquote> <p>Happy Load testing using Gatling!!!…</p> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-15685974028688889242015-08-27T02:53:00.000+06:002015-08-27T02:57:38.089+06:00Gatling : How to download and install Gatling and its folder structure<p>In our previous posts we have discussed what is <a title="Gatling : What is Gatling?" href="http://nadimsaker.blogspot.com/2015/08/gatling-what-is-gatling.html" target="_blank">Gatling</a> and the matters that <a title="Gatling : Things to know to work with Gatling" href="http://nadimsaker.blogspot.com/2015/08/gatling-things-to-know-to-work-with.html" target="_blank">we need to know to work with Gatling</a>.</p> <p>Here we will show how we can download and run Gatling.</p> <p><strong>Pre-Requisite : </strong></p> <p>Gatling requires <strong>JDK7 package (JDK7u6).</strong> It is recommended to install latest JDK. How to install Java on a windows machine can be found by previous <a href="http://nadimsaker.blogspot.com/2015/02/how-to-install-java-runtime-environment.html" target="_blank">post</a>. So install JDK at first to start working.</p> <p><strong>Download : </strong></p> <p><strong>Step 1 :</strong> Go the URL : <a title="http://gatling.io/#/download" href="http://gatling.io/#/download">http://gatling.io/#/download</a> and click on the link “Gatling bundle (zip)”. Note that the latest release is now Gatling 2.1.7.</p> <p><a href="http://lh3.googleusercontent.com/-EOkW4cUCR3g/Vd4nvksK2AI/AAAAAAAAC0s/aS6p_Hb-JzQ/s1600-h/image%25255B3%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-en_YNfjkUbA/Vd4nwtjjwcI/AAAAAAAAC00/hShIcHFyZo0/image_thumb%25255B1%25255D.png?imgmax=800" width="371" height="165"></a></p> <p>You can also use Maven to install Gatling. We will also discuss it on our future post.</p> <p>There is no specific installer or exe file for Gatling. Only the bundles that needs to download and unzip.</p> <p><strong>Step 2 :</strong> After finishing download, unzip the zip file (gatling-charts-highcharts-bundle-2.1.7-bundle.zip). </p> <p><strong>Step 3 :</strong> Go to the “gatling-charts-highcharts-bundle-2.1.7-bundle” folder and inspect the following sub folders.</p> <p><a href="http://lh3.googleusercontent.com/-yLMtgtGOLRw/Vd4nx6-2q_I/AAAAAAAAC08/tfyl9EdJEk8/s1600-h/image%25255B30%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-pISuaKPFy_Y/Vd4nzN_J8BI/AAAAAAAAC1E/Pl4j2PMW5gc/image_thumb%25255B16%25255D.png?imgmax=800" width="565" height="191"></a></p> <p><strong>Folder structure : <br></strong>Folder structure is as following:</p> <p><strong>bin :</strong> bin folder contains the launch file for Gatling and the Recorder. </p> <p>There is a file named <strong>“recorder.bat”</strong> used for recording user scenario that is used for load testing in Gatling.</p> <p>There is another file named <strong>“gatling.bat”</strong> used for starting the Gatling application and executing and generating load testing report. </p> <p><a href="http://lh3.googleusercontent.com/-ZlEWGgCmTKE/Vd4nz1uRdZI/AAAAAAAAC1M/kmYXE--EA_4/s1600-h/image%25255B12%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSo0OCdJ-1pG5BdJpNEswBCXrt4yvLETq90KU7Jhuj5sz9VfuPNRYnpqyurWOLOgaUyTpGwNi5FS-RSfPpyehLhIQeWfccG9NbPanF9IxVvcfD-XsZDCiwIq8O5o3K3hHzJuCxflz5gw/?imgmax=800" width="354" height="89"></a></p> <p><br><strong>conf folder </strong>: It contains the configuration files for Gatling, Akka and Logback. How to configure Gatling by modifying configuration file will be discussed on our later post. </p> <p><a href="http://lh3.googleusercontent.com/-PcJw5FClcaQ/Vd4n1jFuawI/AAAAAAAAC1c/PWMO0XceF7c/s1600-h/image%25255B17%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-waquegzihPs/Vd4n3RqBAUI/AAAAAAAAC1k/H4k7ro_zHjI/image_thumb%25255B9%25255D.png?imgmax=800" width="453" height="103"></a></p> <p><strong>lib :</strong> It contains the binaries used by Gatling. Basically it contains jar files.</p> <p><a href="http://lh3.googleusercontent.com/-qQORPFiUDYE/Vd4n9DvYQyI/AAAAAAAAC1s/MUxUKIrYPXA/s1600-h/image%25255B21%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-nxubaQl5GxM/Vd4n_7VFLcI/AAAAAAAAC10/2Z7LgGsH6ro/image_thumb%25255B11%25255D.png?imgmax=800" width="329" height="204"></a></p> <p><strong>results :</strong> It contains all reports that is generated as sub directory. Every sub directory is the report for a single load test.</p> <p><a href="http://lh3.googleusercontent.com/-XI4dreXFbMg/Vd4oCwiYLZI/AAAAAAAAC18/OcpqmejD0BE/s1600-h/image%25255B25%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-6Mi0r-GJsio/Vd4oD_HPIFI/AAAAAAAAC2E/jCFIDxPQYXA/image_thumb%25255B13%25255D.png?imgmax=800" width="406" height="203"></a></p> <p>Reports are generated as html format. It also generate simulation.log file that contains all the logs at the time of executing load test.</p> <p><a href="http://lh3.googleusercontent.com/-0UtSg5LtNaI/Vd4oE4eIBuI/AAAAAAAAC2M/8s2asw9C4IY/s1600-h/image%25255B29%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-zVGCAIUTRsw/Vd4oF0vhMBI/AAAAAAAAC2U/Uv_6IhFH8QM/image_thumb%25255B15%25255D.png?imgmax=800" width="368" height="236"></a></p> <p><strong>target :</strong> It contains all the test classes used in load testing.<br><strong>user-files :</strong> This folder contains all the user scenarios. Use scenarios are recorded as a Scala file format and copied here. There are three sub directories.</p> <p><a href="http://lh3.googleusercontent.com/-Qho2RBl2pB8/Vd4oG7kDP7I/AAAAAAAAC2c/FLdateHw7eQ/s1600-h/image%25255B34%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-jlTXqzO0G_U/Vd4oH-9bjBI/AAAAAAAAC2k/lslejTMXWQ4/image_thumb%25255B18%25255D.png?imgmax=800" width="376" height="77"></a></p> <p><strong>Simulations :</strong> It contains all the user scenarios as Scala files. Scenarios are stored here as a specific folder structures that will be discussed on our later post. </p> <p><strong>data :</strong> It contains feeder files. We will discuss more on feeder files later.</p> <p><strong>bodies :</strong> It contains templates for request bodies.</p> <p><strong>Run the Recorder : </strong></p> <p><strong>Step 1 : </strong>Go to the bin folder (in my case : C:\gatling-charts-highcharts-bundle-2.1.7\bin)</p> <p><strong>Step 2 :</strong> Double click on the <strong>“recorder.bat”</strong> file.</p> <p><a href="http://lh3.googleusercontent.com/-KvaPTt0XXEw/Vd4oIgZZTJI/AAAAAAAAC2s/-R5CFzPXf60/s1600-h/image%25255B41%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-Gqfw7zAgqDI/Vd4oJRDOb_I/AAAAAAAAC20/swjYCFrfLjE/image_thumb%25255B21%25255D.png?imgmax=800" width="305" height="77"></a></p> <p>A command prompt window is displayed and then recorder window is displayed.</p> <p><a href="http://lh3.googleusercontent.com/-wvRJINHE3RA/Vd4oKDqiwAI/AAAAAAAAC28/H56OhqzWamQ/s1600-h/image%25255B44%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-5Yh_neYGBTU/Vd4oLA4O5dI/AAAAAAAAC3E/8l76RwAUW6k/image_thumb%25255B22%25255D.png?imgmax=800" width="244" height="140"></a></p> <p><a href="http://lh3.googleusercontent.com/-Fr6EDqlp2yY/Vd4oLwQYS5I/AAAAAAAAC3M/Iv8paTqqRMw/s1600-h/image%25255B48%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-qAgwXnRStKY/Vd4oM3s91GI/AAAAAAAAC3U/mLoEv6Pt3J4/image_thumb%25255B24%25255D.png?imgmax=800" width="363" height="212"></a></p> <p><strong>Run Gatling : </strong></p> <p><strong>Step 1 : </strong>Go to the bin folder (in my case : C:\gatling-charts-highcharts-bundle-2.1.7\bin)</p> <p><strong>Step 2 :</strong> Double click on the <strong>“gatling.bat”</strong> file.</p> <p><a href="http://lh3.googleusercontent.com/-KVk_9FzO_VY/Vd4oNtC6S6I/AAAAAAAAC3c/Tu1exFYThk8/s1600-h/image%25255B52%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-BKD9ZmJg3kM/Vd4oOeHiKBI/AAAAAAAAC3k/4N-bcL5R7JA/image_thumb%25255B26%25255D.png?imgmax=800" width="389" height="97"></a></p> <p>A command prompt window is displayed and then load testing instructions are displayed on the command prompt window.</p> <p><a href="http://lh3.googleusercontent.com/-dikxIgQB2_8/Vd4oPF85l_I/AAAAAAAAC3s/tGLy__bbJjQ/s1600-h/image%25255B55%25255D.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://lh3.googleusercontent.com/-PfJgvRr1nw8/Vd4oP0ZOu3I/AAAAAAAAC30/n94VZ8YZN0U/image_thumb%25255B27%25255D.png?imgmax=800" width="244" height="79"></a></p> <p>How we can record user scenario and executing load testing using Gatling will be discussed on our next post. Until then…</p> <p>Happy Load testing using Gatling!!!…</p> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-89928400993251305952015-08-11T03:40:00.001+06:002015-08-11T03:40:48.708+06:00Gatling : Things to know to work with Gatling<p align="justify"><strong><font color="#0000ff">Virtual User</font> :</strong> Some load testing tools can’t deal with logic between requests but Gatling can deal with virtual users, each one having its own data and maybe taking a distinct browsing path. </p> <p align="justify">Some tools implement those virtual users as threads but Gatling implements them as messages that scales much better and can deal easily with thousands of concurrent users.</p> <p align="justify"><strong><font color="#0000ff">Scenario</font></strong> <strong><font color="#0000ff">:</font></strong> Gatling represents user’s behavior as scenario which is written as scripts following Scala syntax. Creation of the scenarios is very important as it is the key to meaningful results of the load test. <br>So it should be designed in such a way that represent true users behavior. Virtual users will follow the scenario that represents a typical user behavior.</p> <p align="justify">For example, a standard search application scenario could be:</p> <ol> <li>Open the Browser and go to the site : <a href="http://www.bing.com/">http://www.bing.com/</a> <li>Enter the text “Gatling” at search text box <li>Click Search button and Gatling related page with link is displayed <li>Click on the link text “Gatling - Official Site”</li></ol> <p>Scenarios are represented as scripts in conjunction with a DSL (Domain Specific Language). This allows fast writing of scenarios and easy maintenance of existing scenarios.</p> <p align="justify">If we want to write the above scenario using DSL then, </p> <p> scenario("GatlingSearch")<br> .exec(http("Go to Bing Site").get("<a href="http://www.bing.com/")">http://www.bing.com/")</a><br> .pause(10)<br> .exec(http("Search with the word 'Gatling'").get("<a href="http://www.bing.com/search?q=Gatling")">http://www.bing.com/search?q=Gatling")</a><br> .pause(30)<br> .exec(http("Click in the link Gatling - Official Site").get("<a href="http://gatling.io/#/")">http://gatling.io/#/")</a><br> .pause(10)</p> <p align="justify">Note in this scenario, “GatlingSearch” is the scenario name, contains 3 HTTP Requests and 3 pauses.<br>Pauses are used to simulate user think time. HTTP requests are actually sent to the application under test when a user clicks on a button or a link. <strong></strong></p> <p align="justify"><strong><font color="#0000ff">Simulation</font> <font color="#0000ff">:</font> </strong>Simulation defines how many users will perform the scenario. There may be different types of users and their numbers are different for different scenario. It also defines on how virtual users will be injected. All the users execute the scenario at a time or ramp up in a certain time period.</p> <p align="justify">For example,</p> <p align="justify">val standardUser= scenario("Scenario X") <br>val adminUser= scenario("Scenario Y")<br>val advancedUser= scenario("Scenario Z")</p> <p align="justify">setUp(<br> standardUser.inject(atOnceUsers(2000)),<br> adminUser.inject(nothingFor(60 seconds), rampUsers(5) over (400 seconds)),<br> advancedUser.inject(rampUsers(500) over (200 seconds))<br>)<br><strong></strong></p> <p align="justify"><strong><font color="#0000ff">Session</font> <font color="#0000ff">:</font> </strong>Each virtual user is backed by a Session that is basically a state placeholder, where testers can inject or capture and store data. </p> <p align="justify"><strong><font color="#0000ff">Feeders</font> <font color="#0000ff">:</font> </strong>Feeders are API for testers to provide test data from an external source into the virtual users’ sessions since Gatling doesn’t provide any tools to generate test data.</p> <p align="justify"><strong><font color="#0000ff">Checks</font><font color="#0000ff"> :</font> </strong>Gatling analyze and verifies the response using Check which is a response processor that captures some part of response and verifies that it meets some given condition(s). It can also be used to capture some elements and store them into the Session so that they can be reused later.</p> <p align="justify"><strong><font color="#0000ff">Assertions</font> <font color="#0000ff">:</font> </strong>Assertions are used to define acceptance criteria on Gatling statistics that would make Gatling fail and return an error status code for the test as a whole.</p> <p align="justify"><strong><font color="#0000ff">Reports</font><font color="#0000ff"> :</font> </strong>Reports are automatically generated by default at the end of a simulation. They consist of HTML files that are portable and can be viewed on any device with a web browser.</p> <p>We will discuss more on everything on our future post.</p> <p>Happy Load testing using Gatling!!!</p> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0tag:blogger.com,1999:blog-5072507204718650532.post-4904642958064195262015-08-04T20:27:00.000+06:002015-08-05T02:03:14.183+06:00Gatling : What is Gatling?<p>Gatling is an open source performance testing tool. It is a framework based on Scala, Akka and Netty. It is a high performance tool and it provides user friendly html reports. Script is easy to maintain and customize. It has recorder and developer friendly DSL. </p> <p>Gatling is a highly capable load testing tool designed for ease of use, maintainability and high performance. Gatling has excellent support of the HTTP protocol. Beside that it supports other protocol. </p> <p>In Gatling, a simple scenario is recorded for load testing an http server. Scenarios are defined in code using DSL and are resource efficient, can be maintained easily and kept in version control system. </p> <p>Gatling’s architecture is asynchronous. Virtual users are implemented as messages instead of dedicated threads. It makes them very resource cheap. Thus, running thousands of concurrent virtual users is not an issue in Gatling.</p> <p><strong>Four Basic steps to complete Gatling : </strong></p> <ul> <li><strong>Record</strong> : You can record any activities of your web application using Gatling. It can record from any browser and any activities even the think time.</li> <li><strong>Edit</strong> : Recorded script can be customized and edited easily as it is easy to read and developer friendly.</li> <li><strong>Launch</strong> : It can be launch through windows command prompt or Linux terminal. It can run through Maven build or Jenkins.</li> <li><strong>Analyze</strong> : Gatling provides some clear, exhaustive, dynamic and colorful reports and they are HTML format. Report can be Zoom in and zoom out. From the report it can be easily pointed out performance issues.</li></ul> <p><strong>Things to do using Gatling : </strong></p> <ul> <li>Gatling’s scenario can be distributed and reused.</li> <li>Different virtual user’s can be configured with different ramp up time.</li> <li>Gatling’s scenario can be data driven using CSV files.</li> <li>It can verify response data using check feature.</li> <li>It can repeat the same request using loop.</li> <li>It can manage check and failure.</li></ul> <p>In our future post we will discuss more about Gatling.</p> <p>Happy Load testing using Gatling!!!</p> Nadim Sakerhttp://www.blogger.com/profile/14094319414007731620noreply@blogger.com0