JavaScript Test Automation Complete Tutorial | Selenium JavaScript Tutorial | LambdaTest

hey guys and welcome to the first part of  this getting started with selenium webdriver   and javascript video series on  the lambda test youtube channel   my name is ryan and i'll be your host as we begin  the journey into web automation with javascript   during this course you will learn how to set up  and write web automated tests in javascript using   selenium webdriver by the end you will understand  how you can utilize some of the awesome features   of the lambda test platform to run your tests  across multiple browsers and versions in the cloud this first video will focus on getting everything  set up so that in subsequent videos we can focus   on writing our first selenium webdriver tests  so now let's start with some introductions   throughout this course we will be using  javascript as our language of choice javascript   is one of the most popular programming  languages especially for web development   it has also become a very popular choice for test  automation and has seen the spawn of a number of   testing frameworks libraries and tools including  cyprus puppeteer playwright and of course selenium   webdriver selenium webdriver is one of the  most widely used tools for automating web-based   applications it provides us with a toolkit  we can use to interact with a web application   in much the same way a user would for  example navigating to a page entering text   clicking a button and even selecting something  from a menu selenium webdriver can be used   to build robust reusable automated tests  which can be run against multiple browsers so now the introductions are out of the way we can  get things set up before we can set up our project   we first need to install nodejs nodejs is a  javascript runtime environment which allows us to   execute javascript code outside of the browser to  download it just navigate to the node.js website   and select the version relevant to the operating  system you're using i'm using mac os so i would   select the latest long term support version  here just click on it to begin the download   once it's downloaded you can  follow the instructions to install you may already have nodejs installed to  check you can navigate to the terminal   and enter node space hyphen v this  will work on both windows and mac if the command returns a version  like here then node.js is installed   if you get an error then you may need to complete  the installation steps before trying again   alongside node.js we also need to ensure npm  is installed npm or node package manager is a   mechanism for downloading and installing  third-party packages into your project   now npm is usually downloaded with node.js to  confirm it is installed we can just navigate   back to the terminal and type npm space hyphen  v and again we should get a version returned   now that we've completed our  prerequisites we can set up our project   to do that i'm going to open up a  terminal and navigate to my desktop here i'm going to create a new directory called   selenium demo and i'm going  to go straight into that this will be the root folder of our project  and from here we can initiate a new npm project   to do that we just enter npm space in it now this is going to create  a package.json file for us   but first it needs some information to put in  there we can enter through each of these steps   which will just use the default  value specified in the brackets at the end just click enter to confirm   our package.json file has now been created and it  looks exactly like what you see on the screen now once we've installed selenium webdriver  we will return to this package.json file   to see how it's changed now that we have our package.json setup  we can install packages into our project   as mentioned previously npm is  the mechanism for doing this   if i navigate to the npm website i can search  for node packages including selenium webdriver here you can see that each  package has a description   along with instructions on how to use it including  code examples it also provides us with the   command that we need to run to install selenium  webdriver into our project so i can copy this now   this will automatically install the  latest version of selenium webdriver   in this instance is version  4.0.0 which is currently in beta if i navigate back to the terminal  we can post paste our command in and hit enter to install selenium  webdriver this won't take very long now that selenium webdriver is installed  we can go back to our packages.json file here you can see that we now have  a new dependency selenium webdriver   this now shows that selenium has been installed  into our project in the final section of this   video we will be setting up the browser drivers  drivers are used to launch a browser instance   in our test to download a driver we  can navigate back to our npm page   on the selenium webdriver page you will  see a list of all the relevant drivers   for the purpose of this test i'll be using  the geckodriver for firefox but you can   use any of them be sure that you have the  browser installed on your system as well   to download the driver click on the  link and locate the driver required   for your operating system i'm using  mac so i will download this one here once downloaded you can open up the driver   and copy it to a location of  your choice i'm copying mine to a drivers directory on my desktop now that we've saved this file we can update the  system with the path to do this on windows you   can search for environment variables on the start  menu from there you'll be able to find the path   which you can then update on mac we can  navigate to the terminal and enter sudo nano etc you'll need to enter your system password and this will show you the current paths  file to update it we can just add a new line   with the path to the driver  so in my instance it's users to exit control x y to save and enter to close to confirm that that path has been  added we can open up a new shell and type echo dollar puff you can see that my new path has been added here so that concludes the first video in this series  we now have everything set up that we need to   write our first selenium test which we'll be doing  in the next video if you have any questions you   can find me on twitter at ryan test stuff or you  can contact lambdatest directly at lambda test   you can also find more cool content from  lambda test at the following addresses thank you very much for watching  and i'll catch you on the next video hi guys and welcome to part two of  this video series on selenium webdriver   with javascript on the test youtube channel during  this session i will be helping you write your   first selenium webdriver test using javascript  so in part one of this video series we   focused on getting everything set up to allow  us to write our test so we've installed node.js   we've downloaded selenium webdriver package  and we've set up our project during this video   we're going to focus on writing our first test  first up we're going to look at selecting an ide   then we can begin creating our test  line by line to see how it works   during this part we'll also look at the  use of locators to find elements on a page   once we've completed our test we will run  it locally and analyze the results and then   finally we'll do a full review of everything  we've achieved in this session so let's begin   by selecting an ide for the duration of this  video series i will be using visual studio code   a free ide which you can download on mac or  windows if you don't want to use vs code you're   more than welcome to follow along in any other ide  you'd like to use uh just be aware that some of   the buttons and actions might be a bit different  on your id so now that we've selected an ide we   can get to the fun bit and write some code so  i'm going to jump straight into visual studio   code here and i've actually already opened up the  project that we created in the previous lesson   our selenium demo project and if i expand this  you can see we have our package.json file that we   went through and we also have this directory here  which contain all of our npm packages so the first   thing i'm going to do is create a new directory on  the root of our folder i'm going to call it tests and as you can imagine this is  where all of our test files will go   now from here i'm going to create a new  file which i will call first test dot js.js   meaning it's a javascript file just enter to  create that so now we have our blank dot js file   where we can start writing our test so as we write  our test i'm going to assume you have a little bit   of javascript knowledge so the terms variable  and function means something to you you don't   have to understand everything but a little bit  of understanding will go a long way as we write   this test the first thing we need to do is add  a required statement at the top of our file the   required statement allows us to pull in specific  functionality from a node module into our test   we'll be using selenium webdriver so we'll need  to require this node module in our test in order   to use the selenium web driver keywords  for us we need to enter cons curly braces builder equals require brackets and inside quotation marks  we can add our node module selenium webdriver and let's just finish with a semicolon  great that's our first line of code written   next up we need to create a function a function  will be used to house all of our test code   that means that when we execute the function   our test will run in order to create our function  we will use the keyword async followed by function   and now we need to give our function a name  in this instance we'll just call it example   we can follow that up with an open and closed  brackets followed by open and closed curtain   braces now our code will sit between these  curly braces so we can expand this out a bit   now that we've got our function we can start  writing our code to navigate to an application   but first we need an application to  navigate to in this demo we'll be using   the lambda test sample to do site  this allows us to add new to-do's to this list during this test we'll navigate to  this page and add a new to-do before closing the   page again so let's write the code now so back  we go to vs code in order to write these steps   before we write any code i'm  just going to add some comments   so we know exactly what steps we need  to do so first we know we need to launch the browser then we need to navigate to our location   and for the purpose of this test we need  to add a to-do and at the end we will close the browser perfect so during  this demo we will write the code for   each one of these steps so let's start by  launching the browser we do that by using   the builder command that we required at  the top of our file so i will write let driver so this is our  variable name equals await new builder and brackets and now we need to specify  which browser we're going to use so i will do   four browser and then open the brackets and  in here within quotation marks we specify   our browser so in this demo  we will be using firefox we downloaded the firefox  driver in the previous session   so that should all be set up and  then finally we can add build brackets and a semicolon at the end  stop we can navigate to our application   for this step here to do that we can use driver  that we stored as a variable so i'll do a weight   driver dot get and again open brackets  within quotation marks we can specify   the end point that we want to navigate to if i  go back to this page here this is our endpoint   so i'll just copy this go back to our test and paste it in so now we have our endpoint that  we wish to navigate to so at this point if we   wanted to see what was happening we could actually  run this to do so we need to call this function   so at the end of our file i will add example which  is the name of our function at this point if we   wanted to see what was happening we could actually  run this to do so we need to call this function   so at the end of our file i will add example which  is the name of our function and then just open and   close brackets so this line here will actually  cool our function and that will in turn execute   these steps now what we're expecting to see at  the moment is a new instance of firefox launch   and navigate to this endpoint here to run this  we can go to the terminal open up a new terminal   and we can just enter node and then  the name of our file including the   directory so in this instance we have node tests  forward slash first test.js so if i run this now you should see that a new firefox browser is  launched and it's navigated to our application   perfect so i will go back to our test okay now we  can add a to-do so if i go back to our application   you can see that in order to add a to-do we need  to be able to enter some text into this field here   so now we will look at how we can interact  with this field to add a new to-do   locators are an integral part of  automating web applications using locators   enables us to find and interact with web  elements upon a web page in our example   we want to be able to find this text  field here so that we can add a new to-do   in order to find a way that we can locate this  element we can right click and select inspect this brings up the inspector window from here we  can find a unique way of locating this element   i could right click on here select copy x  path to select the x path to this element   but in this instance i'm going to use the id  field here instead so the id for this element   is sample to two text so we can use this in our  test to locate this field so we can enter the text   so let's do that now we'll jump back to visual  studio code and under our add to do section we'll   write our next line of code so just like before we  start with a weight driver but now we want to find   the element so we will use dot find element and as  i mentioned we'll be using id so we open brackets by dot i d and open brackets again and here we can enter   the text of the id that we want to  find inside quotation marks if we go   back to our web application we want to use  this sample to do text so i'll copy that in here i will paste that so this will find the  element which has the id sample to do text   once we've entered the text we need to be  able to submit it so it's added as a new to do   so if we go back to our application we  could interact with this button here   in order to add our new to do or  we could simply press the enter key   and we'll be using the enter key to submit our new  to-do so if i go back to my test we can go back   inside these brackets add a comma and we're  going to use the selenium keyword of key followed by adopt and followed by the key that  we want to use so we want to use the key return all in capitals and then i'll  just add a semicolon at the end   now at this point our test is actually going  to fail and the reason is we're using two key   words here in this line of code which we need  to require from selenium webdriver the buy and   key so in order to require them we can add them to  this constant here so in here we can just do comma fine and comma key perfect now they have been added into our  file we should be able to run this so if i save   my file go back to our terminal and use the same  command node test slash first test.js hit run now and we should see that a  new firefox browser opens up   and our text is added to the field so now we  just have one line left to right in our test   it's always best practice to close the  browser down once your test is finished   so we'll write a line of code now to close  the browser all we need to do is use a weight   driver like we've previously used and  this time we're going to use dot quit just like that so this will quit the browser once  it's completed the steps above so if i save this   and run now using the same command in the  terminal you'll see that a new instance   of firefox is launched we navigate to  the web page and the browser is closed   now every time we've run our tests so  far we've used the terminal to trigger it   so we've used this node command followed by  the path to the file we'd like to execute i   just wanted to draw your attention to the run  button in visual studio code now most other   ides will have an equivalent button so have a  look you'll be able to find it somewhere up here   we have a play button and that allows us  to execute the code outside of the terminal   by pressing play it will execute the test just  in the same way as we saw using the terminal   if you're using vs code and you don't see this  icon you may need to navigate to this extensions   icon here in the menu and  then search for code runner and then you'll be able to install code runner   which will enable this button so if i  press this button now to run my test you'll see that the output screen  down here has started running our test   and shortly we should see a firefox browser  open and our test is getting executed   great job so we now have a test that we can  execute using selenium webdriver and javascript   let's take a quick look at everything  we've achieved in this session so we've learned how to require the selenium  webdriver node module in to our test file we've also learned how we can create a new  asynchronous function and give it a name   once we created our function we were then able to  write our code for our test inside of the function   first we built a new browser instance for firefox   secondly we navigated to our  web application using driver.get once we were on our web application  we could use the find element by id   to locate the text box and add  our new to do learn selenium   we also saw how we could use key dot return to  mimic pressing the return key on your keyboard then lastly we used driver.quit to  close the browser we called our function   by adding this example down here once we completed our tests we learned how  we could execute this test either via the   terminal or via the run code option in our ide  so that wraps up part two of this video series   on selenium webdriver and javascript if you have  any questions you can reach out to me on twitter   using the handle at ryan tester or you can contact  lambda test directly if you've enjoyed this video   be sure to check out the other videos  on the lambda test youtube channel   alternatively you can go to the lambda test blog  and find many articles about a range of testing   topics including automation testing using selenium  webdriver and javascript be sure to check out the   certifications page on the lambda test website  so you can learn how to earn your lamb to test   selenium certification thank you very much for  watching and i'll catch you on the next video hi guys and welcome to part three of this  selenium webdriver with javascript video series   on the lambda test youtube channel my name is  ryan and today we're going to be talking all   about assertions first up we're going to  look at what we really mean by assertions   what they are how and when we can use them  secondly we're going to look at two separate ways   we can write our assertions first up we'll look  at using the built in node.js library for creating   assertions and after that we'll look at using  chai an assertion library popular in node.js   finally we'll do a recap of everything  we've learned about assertions   assertions are a mechanism for us to be able to  validate the state of our application for example   you could use an assertion statement to check that  a url has changed following a successful login   or perhaps the valid error message or  alert pop-up appears in a certain situation   you could use it to check that an item has  been successfully added to a shopping cart   in our example we could use an assertion statement  to check that our new to do has been added to the   list and contains the correct text assertions  can be used to confirm if a test passes or fails if our to do hasn't been added or the text is  incorrect then our test will fame if the to do   has been added and the text is as we expect  then our test will then punch first up   we're going to take a look at the built-in  node.js package for writing assertions   now by built-in what i mean is that we don't  have to use npm to install this package in   order for us to use it however we do still have  to use require in order to use it in our test   so if i jump into visual studio code and go  back to tests we wrote in part two of this   video steering i can add a new require statement  under our previous one for selenium webdriver   so i'll start by using const and then  i'll call this assert equals require brackets quotation marks and  in here we are going to use   ascent just like that so now we've  required this package in our file   so now let's take a look  at what we'd like to assert in our example we were adding a to-do to this web application and we added a new  to-do called learn selenium so what we want   to do in this example is write an assertion  to check that learn selenium has been added   to our list so to do that we can go back to  visual studio code and start writing our assertion   until we've created it so our assertion  will have to go below this line here so underneath here i'm going to create a new  section called assert and then in this section   we can start writing our first assertion to begin  with i'm going to create a new variable called to   do text this variable will hold the text we want  to validate so what we want to do is check that   the newly created to do contains the text learn  selenium which we used here when creating up to do   in order to create what to do we need to  be able to first find the element much   like we did when creating the to do here  so we'll use await driver dot find element by dot now in this example we used id   but for this line we're actually  going to use x path instead like that add some brackets then inside these  quotation marks we can add our x path in order to find an x path we can use  i'm going to go back to our application open up developer tools and from here you can see  that each of these to do belongs to a single list every time a to do is added it gets inserted at  the bottom of the list so here is our latest to do   and it's been added right  at the bottom of the list   so our x path in our test needs to be able  to retrieve the last entry within this list   to do that we can go back to visual studio code  and inside our quotations we can build our x path   first we'll do forward slash forward slash  followed by l i for list and then we're going to   open and close square brackets and inside these  square brackets we can enter last and then open   and close brackets now this xpath will find the  list element and then retrieve the last item in it   we've only got one list on our page so this will  work perfectly fine now in particular it's the   text of this element we want to find so to do that  we can use selenium get text command like that let's just remove the extra weight there  we go so now that what we're saying is find   this element the last element in this list  and retrieve the text value of that element then it will be stored in this to do text  variable for us to use in our assertion   now in order to use the value retrieved  by get text we need to return it   as part of a then function to do that  after get text we will type dot then and open brackets inside here  we'll create a new function and open brackets again and in these  brackets we'll just enter the word value and then outside of these brackets we'll  create new curly brackets and then it just   creates some space here now inside here  we just need to do one thing we can return value just like that and what this will do is return the value  retrieved from get text and store it   in to do dot text that means we'll then be able  to use that value in our next line of code so   underneath here we're going to write our  assertion to do that we're going to enter assert dot and we're going to use strict equal and this  is a mechanism for checking that two strings match from here we can open brackets we need to provide  two arguments firstly what the actual value is   and then secondly what our expected value  is so our actual example has been stored in   this to do dot text variable so we've gone to  our web application we've retrieved the value   and we've stored it in to do dot text so our  actual value we can just type to do dot text our expected value is what we've listed here  learn selenium so we can just take this string and add it here like this so what  we're doing now is we're saying   check that the value stored in this variable the  value which is on our web application check it   matches the value in learn selenium so now we  can actually run this test to see if it works let's run it now we can see from  the output that this is now running   so any second now we should see  a new instance of firefox open and our test runs okay back to visio studio  code you can see that the test has worked we've   got no errors we have exit code equals zero  which means no errors and the test is passed if i change this text to learn javascript and saved it and re-run the test should now see firefox open again our test gets run but the browser doesn't close the reason  it doesn't close is because our test has failed   before our driver dot quick step   and if we look at the terminal now you  can see that we've got an assertion error our actual value is different to our expected  value so this is how we can use assertions to   check that our application is behaving  in the way that we would expect it to so now that we've had a look at using the built-in  node.js library for assertions let's have a look   at chai so chai is a very popular assertion  library for javascript and it provides us with   three functions for writing assertions we can  write should expect and assert style assertions   now each comes with its own syntax but you  can use whichever best suits your use case   for our demo we're going to take a look  at should but first let's install chai   so i'll go back to visual studio code and from the terminal i'm just going to do npm install chime so this is going to install the chai package into  our project if we open up our package.json file   now you'll see that we have selenium  webdriver that we installed previously   but we also now have chai listed  as one of our dependencies   which means this is now being installed  in to our package let's close that down so now we can start using chai in our test  so as always if we want to use a package   in our file we first need to add it at  the top of our file as a require statement   so we'll do that now should because we're using  the should style of assertion equals require   brackets inside quotations we can add chai   now in this instance at the end of  this line we're going to add dot should   and open close brackets now if you're going to  be using the expect or assert style of assertions   from chai then you don't need to add this last bit  it's only relevant if you're going to be using the   should style so now that we've added this  line in here we can write our assertion   so down here we already  have our previous assertion   so i'm just going to give that a little  title here so we know what it is so this is insert using node insertions and then below that we can add a  new one which is insert using char should and   we can add our chai assertion here now one of  the reason that chai assertions are so popular   is because they make those assertions more human  readable and you'll see that in this example here   when we're using should we start with the value  that we want to validate so in this instance it's   our to-do text value here so what we're really  saying is to do text should equal learn selenium   and that's exactly how we write it so  we start to do text dot should dot equal and inside these brackets we can add our expected  value so in this instance it's our learn selenium   value here so i'll just copy that and add that  here so there we are this is our chai assertion our to-do value should equal our expected  value here so let's run this now before so before we run this i'm just going  to comment out our previous assertion   save the file and then hit run and we should see much the same as before  our browser launches the test runs and the   browser closes when i go back to video studio  code i can see that our test is completed with   a code of zero meaning that there have been  no errors likewise if i change this to java script click on it again our browser will launch but in this time   it won't close because we receive the error  before we hit this driver.quit statement there we are the browser hasn't closed  if i navigate back now you can see that   in our output we've got an error and we  can see that ex we expected learn selenium   which is our actual value to equal learn  javascript which is our expected value so let's have a look at what we learned today  so first up we used a different way of locating   elements on the page previously we'd used  id but in this example we we used xpath we   then had a look at how we could use the get text  function to retrieve the text from this element   we then used dot then to return that  value and store it in our variable   now don't worry too much about this we're going  to cover it in more detail on the subsequent video once we've stored our variable  we could use it in our assertions   now we've used two different styles of assertions  first up we use the built-in node.js assertion   to validate that the value of the  to do matched the value we expected secondly we had a look at using try to  write our assertions using the should style   again we validated that our to-do  which was created contained the text learn selenium part so that concludes part  three of this video series where we learned   all about assertions as always if you have any  questions or want to get in contact with me   you can use the twitter handle ryan test stuff   to find me alternatively you can contact lam  to test directly if you enjoyed this video   why not go ahead and check out the other videos  on the lambda test youtube channel alternatively   visit the lambda test blog where you will find a  range of blog posts about various testing topics if you're interested in certifications visit  the certification section of the lambda test   website where you can learn how to  get lamb to test selenium certified   well that's it from me and  i'll see you on the next video hi guys welcome to part four  of the selenium webdriver   with javascript video series on  the lambda test youtube channel   i'm ryan and during this video we're going  to be talking all about test frameworks first up we'll do a brief introduction to test  framework so we can understand what they are   and why we use them secondly we'll take a look at  one of javascript's most popular test frameworks   mocker once we understand mocker we'll look  at how we can add this test framework into our   existing selenium webdriver test once we've added  mocha we'll understand how we can run our test   using the test framework and finally as usual  we'll do a full review of everything we've   looked at during this video so let's get started  every scripting language comes with a number of   different frameworks to select from popular  javascript frameworks include jasmine jest   and mocha every framework may use a slightly  different syntax and each come with a varying   set of tools you can utilize within your  test automation be sure to compare all   of the test frameworks and select the one  which best suits your use case during this   demo we will be using mocha as our test framework  so let's learn a little bit more about mocha now   as mentioned mocha is one of the most  popular javascript frameworks it's open   source and provides a whole host of  features that make it a great choice   for integrating with selenium webdriver for  example it includes test parallelization   support for test retries as well as test reporting  mocker provides us with two core functions that   we can use when writing our tests first up we have  the describe function now the describe function or   block can be used to group tests together so for  instance in our example we could have a describe   block which holds all of our tests which to do to  our application next up we have the it function   now it represents an individual test so each of  our selenium tests will have that own it block it functions sit inside the describe  function and a describe function   could have multiple it functions inside now  we're going to go ahead and implement this   syntax in our existing selenium test so  now that we know a little bit more about   mocha i think it's about time we start  writing some code so i'm going to jump   back to visual studio code where we have our tests  that we've been writing in the previous videos now   as always to use mocha we first need to install  it so i'm just going to open up a new terminal and just do npm install mocker and this is going to install  mocha into our project there we go so now we have mocker  installed we can start writing some code   first of all i'm just going to add a little  bit of space up here for us to work in   and we can begin by creating our two blocks  first up we need to create a describe   block and then after that we're  going to create our it block   so to create our describe block we first need  to use describe as a keyword and then inside   the bracket we need to provide two arguments  first of all we need to provide a title and   then we provide a function so our title should be  something meaningful so inside this describe block   we will have our test to add to do so our  described title could be something like add add to do tests and then after that  we can add our function just like this and there we go this is our described block   and as i mentioned our it's blocks  sit inside of our describe block right in here to write out it block we use the  same syntax but this time we're going to use an   asynchronous function because we're going  to be executing some asynchronous code   so we'll use it as the keyword open  brackets again we need to give it a title   so this is going to be our to-do test so our  title could be something like it so successfully and a to do to application and then afterwards  we're going to add our async function like this there we are so we now have a describe  block and inside that describe block   we have a single it's block now  a describe block could have many   its blocks inside we've only got one test at the  moment so we just need one so now we've done that   we can start moving our code here for our pair  into the relevant blocks up here before we do that   we just need to do a little bit of tidying  up first so now we're going to be using   mocha as our test runner we no longer need  to execute the function using this example   here so i can remove that and actually we're  not going to be using a function at all   i don't even need this function here so we'll  get rid of the curly bracket down here as well   so we now just left with our test code  lastly we currently have two assertions doing   practically the same thing one using the  node assertion library one using chime   so we don't need both of these so i'm  just going to remove the one using node   if you want to remove the one using chai and keep  the node one you're more than welcome to do so   now that i've removed the node assertion  i no longer need the require statement   for this either so i'm just going  to get rid of this one as well and there we go we're now left with just the  steps we need and we can start moving them   into our code blocks up here so the simplest  way to do this is to copy all of these steps and paste them directly into our it's block here now this will work and this is how we're going to  run this test in this video but in the next video   we're going to learn how we can split some of  this code up into separate blocks to make it   a little bit easier to read and allow us to  reuse some of that code in subsequent tests   but before we do that we can run this test  and see how it works i'm just going to use this formatter to reformat the code so it  looks a bit nicer and now we can run this test during our previous videos we during  our previous videos we've had to during our previous videos we've had  to call the example function directly   in order to execute our test but now  we've updated our test to use mocker during our previous videos we've had to call the  example function in order to execute our test   but now we've updated our  tests to use mocha we can in our previous videos we've  had to call the example function   in order to execute our test but now that we've  updated our test to use mocker we can run it by   invoking mockup via the terminal to do that  we use npx which is the node package runner   and then we specify the package we want to run  in this instance it's mocker now because we're   using a synchronous code i'm going to add a flag  here for no timeouts mocker has a default timeout   of two seconds so by adding this we just  ensure that our test runs without timing out next i'm going to add the  path of where our file is   so our test file sits in the tests directory  and i want mocha to find any files in this test   directory which have the file extension dot  js so i'll use the star for wildcard dot js   now locker will know to look in the test  directory and pick up any files with the   js extension and run those so i press enter now  you should see that it's found add to do's test   which is the describe title and it's now  launching the browser and running our tests unlike previously we now get a report which tells  us how many tests have passed so we only have one   test and thankfully it's passed now by default  mocker actually looks for a directory called test now by default mocha actually looks for a  directory called test within the project   and it will find any mocker tests inside  of that directory so to make our command   even more simple we can  rename our directory to test that way when we run our command by the terminal  we no longer need to specify the path to our test   directory when i run now it's still able to  pick up the add to do test describe block and   is able to execute the test to make things even  easier for us we can update our package.json file   with this command all we need to do is open up our  package.json file and update the value for test notice we don't need to include npx that's just  mocker followed by any flags so if i save this now now if we run via the terminal instead of  using npx we're going to use n p m for node   package manager and instead of writing the  mocker command we're just going to use test you can see that this is actually pulled the  command that we've added to our package.json file   it's located our to-do describe block and it's executed our test so i think we've achieved  quite a lot during this video   so let's take a look back at  our test and see what we did so after we installed mocha we created  this describe block and inside that we   created an it block we then added all of  our test code inside of this it's block here   we then learn how we can execute our test using  mocker via the terminal and also how we can update   the package.json file to include our mocker  command now in the next lesson we're going to   refactor some of this code to make it a little bit  easier to read and make some of the steps reusable   for other tests so that's it for part four of this  video series as ever if you want to get in contact   then you can find me on twitter using the handle  at ryan test stuff alternatively you can contact   lambda test directly if you like this video be  sure to check out the lambda test youtube channel   there's plenty of other videos on there to view  alternatively have a look at the lambda test blog   where you'll find hundreds of blogs on various  testing topics if you're interested in learning   more check out the lambda test certifications  page where you can learn how to become lambda   test selenium certified anyway that's it  from me and i'll catch you on the next video hey guys and welcome to part five of this selenium  website with javascript video series on the   lambda test youtube channel my name is ryan and  during this session we're going to be exploring   parallelization first up we're going to take a  look at what we actually mean by parallelization   how that differs to how we've run our tests  previously and what the benefits of running our   tests in parallel are once we've done that we're  going to add another test to our existing selenium   test suite of course you can't run a single test  in parallel so we'll need to add at least one more   once we've added our test we'll then look at how  we can use mocha to run our tests in parallel and   of course at the end we will do a full recap of  everything we've looked at during this session   so let's get started first up  let's take a couple of minutes   to understand what we really  mean by test parallelization   so essentially test parallelization is a way  for us to run multiple tests at the same time   now really there are two different ways we can  run our tests either serially or in parallel   when we run our tests serially what  we're doing is running each test   in sequence one by one that means that we're  never running more than one test at the same time   the next test will wait for the previous  one to finish before it begins executing   when we run our tests in parallel it allows us to  run multiple tests at the same time so instead of   just running a single test we can actually run two  three four tests at the same time and the reason   we do this is firstly to increase the execution  speed of our test suite as you can imagine if   we're executing more tests at the same time the  overall time it takes to execute a full test suite   will be reduced and as a result this reduces  the feedback loop testing is all about gathering   information and feedback on our application so  if we can reduce the time it takes to gather all   that information it allows us to act upon  that information earlier on in the process   and hopefully fix those issues sooner but test  parallelization also comes with some complications   it's good practice to ensure that each of your  tests is completely independent of all other   tests in your test suite it should not rely on  the results of any other test or data created by   any other test for it to run you should be able  to run each of your tests on its own without   having to run a different test first this means  that when we run our testing parallel we know   we don't have any data conflicts and we know each  test will be able to run regardless of which order   it runs in secondly we need to be conscious of  the system that we're using to execute our tests   if we overload our system by running  too many tests at the same time   it can actually have the adverse effect we can  start increasing the time it takes to execute   our whole test suite and we may see tests  failing if we start overloading the system   so just be conscious that you're not  running too many tests at the same time   and you can change the configuration and work out  what the best config is for you to use to get the   maximum speed out of your test suite so now let's  go and have a look at our test so up until now   we've just been using a single  test in our selenium test suite   but of course you can't run a single test  in parallel so we're going to need to add   another if i go over to our test suite we  have our single test here in this first test   dot js file now i mentioned previously  that we can add extra tests within   this file inside of our describe block so we  could have add another it block to the end   of this one with an additional test but that is  not how mocha parallelization works it won't run   its blocks in parallel with each other so if you  have lots of tests inside this described block   they still will run sequentially one  after the other the other instead   mocker runs these test specs or files in  parallel so if we were to create a new file with   an additional testing then we'll be able  to see how mocha will run those tests in   parallel with each other so we can do that  now so if i just copy what we already have paste it here and then rename it  let's just call this second test so we now have two tests and at the moment they're  doing exactly the same thing but that's okay for   this demo because it will just show how the  tests run in parallel we can look at adding   subsequent tests which do different things later  on so the only thing i am going to change in the   second test.js is i'm just going to change  the describe block description and the it's   block description just so we can differentiate  between the two so first up let's change this to add another to two tests and successfully add  enough to do okay so our tests are going to   do exactly the same thing but we should  be able to see which one's running based   on the description for the describe  and the it block so let's run that now   via the terminal exactly how we've run them  previously so we don't need to change anything   and mocker will recognize that there's  now two files in our test directory   and it should be able to pick up the both and  run both sets there we go there's one done   you can see the firefox is relaunched  and it's now running the second test   if i go back to visual studio code you  can see that it's ran add to do tests   and add another to-do test so these are our two  describe blocks and inside each one has an it   block which is run and we have two passing tests  which is great so now that we've run our tests   serially we can look at how we use mocha to run  those tests in parallel and it's really simple to   do so if i jump back to the code we've got our two  tests that we've just run and both of them passed   and we saw how one instance of firefox was  launched and closed and then once that closed   a another one was launched and our second  test ran and then that close now in order   to run both of these tests at the same time we  need to just update the command that we use to   execute those tests and if you can remember  that command is stored in our package.json file   and it's this script here so at the moment every  time we run npm test we're actually running   mocha with this no timeouts flag so for running  tests in parallel we need to add a new flag we   can just add it to the end here such as a space  hyphen hyphen and then quite simply the flag is parallel so using this flag will then tell mocker  to run our tests in parallel instead so i can save   this and we can go back to our terminal and we can  now use exactly the same nps test npm test command   that we used previously but this time instead  of running mocha no timeouts it will run mocker no timeouts with the parallel flag as  well and again mock will know to pick up   both test specs both test files but this time  you can see that it's actually launched two   instances of firefox at the same time so  both my tests are running at the same time let's go you know both close if i go back  to visual studio i can see just like before   we have both tests which have been run and  two passing tests the only difference this   time is that we launched both of those tests  at the same time and run them in parallel   so it's as simple as that just adding a single  flag to the end of our command in order to run   them in parallel so let's take a quick look at  what we've done so first up we had to create a new   file within our test directory and this  new file had a brand new test inside it   for this demo is exactly the same as our first  test but good enough to show parallelization   once we'd added our second test we updated our  run command in our kitchen.json file to include   this mocker parallel flag and this tile  tells mocha to run our test of parallel   once we've done that we could see that our tests  ran exactly the same as when they run sequentially   but this time they run in parallel both running at  the same time so that brings this short video on   parallelization to a close if you have any  questions or want to get in touch then you   can find me on twitter using the handle at ryan  tester or you can contact lambda test directly   if you're interested to learn more why not  check out the lambda test blog where you'll find   a whole host of blogs about various testing  topics you can also check out the lambda test   youtube channel for other videos that you might  be interested in and lastly remember that you   can check out the certification section of the  lambda test website to see how you can become   lamb to test selenium certified so that's  it for this lesson thanks again and i'll see   hey guys welcome to part six of this selenium  webdriver with javascript video series on the   lambda chest youtube channel my name is ryan and  during this video we're going to focus on adding   reporting into our existing selenium webdriver  test project now so far we've only been able   to view results via the command line so by the  end of this session we'll be able to view the   past and failed results of each  of our tests via an html report   now to do this we're going to be using a  tool a note package called mock awesome   so to begin with let's have a look at what  more caution is and how we can use that   once we've understood that we're going to add more  awesome capabilities into our existing project   which is super simple to do once we've added  those reports we'll run our tests through again   and we'll check the results this time on  the newly generated reports and as ever   at the end we'll just have a quick recap of  everything that we've done during this video   so let's have a look at what mock autumn is  mock awesome is a node package which enables   us to create custom reports specifically for  the mocker test framework now we've already   implemented mocker in our existing surname  web drive test so we'll be able to utilize   mock autumn to generate some reports for our test  execution now so far when we've run our tests   we've only been able to view those results via  the command line now this isn't very pretty nor   is it easy to distribute those results to other  team members or stakeholders using mock awesome   we can generate prettier html reports which can  then be sent out to relevant parties to review   you can also make it a little bit easier to  understand which tests have passed and which tests   have failed now we don't actually have to make  any code changes to our existing tests in order to   generate more awesome report what we do  need to do is install it into our project   and then update our test runner command in order  to generate those more awesome reports so let's do   that now so to add mock awesome into our existing  project we just need to open that project up in   our ide launch the terminal and from here we can  install it in the same way that we've installed   other packages into our project and that's by  using npm install followed by the package name like that and this will install  the package into our project now as i mentioned previously we don't actually  need to make any code changes to our existing   tests in order to start generating reports  with mock also we do however need to update   the flags in our test command when we execute  our tests so so far what we do is we run mocha   and we use the parallel flag to indicate that  we want to run our tests in parallel so to start   generating reports we just need to add  some additional flags to the end of this   so everything in there at the moment stays the  same but at the end i'm going to add a space   hyphen hyphen then we'll add our first flag which  is reporter like that to indicate that we're   going to be using a report generator and then the  name of that report generator so we're using mock awesome so if we were running  our tests in serial mode   then this would be sufficient enough for  us to start generating reports but because   we're using this parallel flag to run our test in  parallel we just need to add an additional flag   so once again i'm just going to add a  space hyphen hyphen and then require mock awesome slash register like say now what  this does is registers mock awesome as a hook   which we need to do when running our tests in  parallel now this is all documented in the mock   awesome documentation so it's worth having a look  through that documentation and understanding uh   everything that's required in order to generate  these reports but for us this is enough to start   generating now so i'm going to save this  and i'll close our package.json file down   and then we can open up the terminal once  again and we can execute our tests npm   test and let's run so you can see now that this  has picked up our new test command so we've now   got the reporter mock awesome flag and our require  flag for parallelization there go our tests   they have completed so if i go back to vs code  you can see that we still get the terminal output   for our tests so we can still see  that we've got two passing tests   but in addition we now have a new directory  which has been generated by mock autumn   so in the next section we'll  look at what's actually   in this directory so we've run our tests  and we've noticed that in our project we   have a new directory this mock awesome hyphen  report directory so if i expand this directory   you can see that we have the additional directory  called assets here along with two more files below   so inside assets you'll see that there's  a number of different files now we don't   really need to worry about these this is the  information that uh mo awesome needs in order to   to generate the reports so we can minimize  this and we can focus on the two files we   our interested in this dot json file here and this  dot html file so if i start with the dot json file   you'll see that it contains the raw  information relating to this particular   test execution running so for example we can  see the number of tests importantly the number   of passing tests and things like the start and  end time and overall duration if i scroll down a   bit we can see the individual results for each run  and from here we can see things like the describe   description and the it description that we've  specified in our test files we can see the   name of the file which has been executed and  particular information about this particular   run how long it took whether it passed or failed  and so on if i scroll down a bit i can see the   first test.js file here which has also  been executed now obviously we only   have two tests but if we had many more  they'd also be documented here as well   you can see which version of mockup  is used in your execution and also any   particular options used when  generating the mob awesome reports   now again this is really useful and can  be used to integrate with you know cicd or   even use to generate your own custom reports but  if i close this down and navigate to this html file instead we can actually  see what the report looks like so this is what mock awesome has generated for  us you can see that it's split up our tests   and we can click on this to expand and actually  see the test code that has been executed as part   of this test we can also see things like the  time it took to to execute that test so you   can also expand this one and see we know in  our instance these are the same at the moment   but again if you had uh many different  tests you'd be able to see them all here   so we've seen what the mock awesome report looks  like when we have two successful tests so let's   have a look at what it looks like if we have a  failed test so back in vs code i'm just going to   change our second test.js file and i'm going  to do two things first of all i'm going to add a new it's block to our uh describe block  so this will be a brand new test and   i will call it adding a new test for reporting  just so we can see that it's different in the   report and then this one i'm going to  change the expected text to learn javascript now because i've changed the expected  test this test is actually going to fail   so we should see the test in first test.js  pass one of the tests in second test.js pass   and the other one in that same file fail so if  i open up the terminal again and do npm test   and execute our tests so now we've  got three tests which are going to run   we should see that reported on the terminal  in a minute and then we'll have a look at what   it looks like in the mark wilson report  so it's just running the final test now this one's stopped because it's actually failed  so if i go over to visual studio code you can see   that that test has failed so we've got two passing  and one failed as expected so if i open up this   directory again these files get overwritten  with each run so these will be our new files so we can open up this one in our browser  and take a look at what it looks like now   so now we can see this add to do's test for  our first test.js is completely unchanged so   it looks exactly the same as it did  before but in our second test.js file   we have our describe block and inside that we have  two tests now including our adding a new test for   reporting test which as expected has failed  so again we can have a look at the code which   is actually executed as well as the error that's  returned that we've already seen in the terminal so we've seen how mock awesome generates custom  reports out of the box for us and we've seen how   this mock awesome hyphen reports directory  gets generated with the mock awesome report   inside but we may want to change this  directory or even the file name to   something a little bit more useful and meaningful  to our project and we can do that by updating our   script that we use to run our tests we can  add additional flags in order to configure   these sorts of things so we can do that  now the first thing i'm going to do   is add a new flag as before space hyphen  hyphen and this one's called report reporter hyphen options and from here we're going  to add two new options to use we're going to add   one to change the directory that our reports  go into and then one to change the name of the   files so to change the directory we can use  report dir report directory and then we can   specify the path to that directory equals  and then if we just take the path from here but instead of my course and reports  let's change it to test ring test reports   so our reports will get saved in a directory  called test reports and secondly let's change the   name of the files at the moment it's  just called awesome so let's change it to let's go report file name and game equals  and let's just call it test test results like that so we've added  our two new options reporter options   first the report directory  and then the report file name   now there are other other options you can update  but for now we'll just use these two so if i   save my package.json file and from  the terminal let's run our tests again this is running this is our final test running now which again  will take a little bit longer because it's going   to fail let's jump over to vs code you can see  that we've now got a new directory called test   reports which is what we specified in our command  here in our reporter options and if i expand   this we have the same structure but this time our  report called test results instead of look awesome   so you can see how you can configure this to  match what you require inside of your project   so now we've completed that let's do a quick  recap of what we've done during this video   so of course we first installed  mop awesome into our project   and then once we've done that we  updated our script here to include   this reporter flag specifying mock awesome we  then added a second flag which was required   for us to run our mocker test in parallel  this require mock awesome register flag running our test suite using these two flags  produced a mock awesome hyphen report directory   with two more awesome reports one in  html format and second in json format adding some additional reporter options  then allowed us to configure the directory   that those reports are stored in as  well as providing a custom file name   so now we get reports in a new directory  specified by us as well as reports with   the desired name we also reviewed  the output of the mock awesome report   so we could see what success scenarios and failure  scenarios look like when that output in the   html report so that's it for this video where we  learned how to implement mock awesome reports into   our selenium test suite if you have any  questions about what we discussed in this video   or any of the other videos in this series then  you can find me on twitter using the handle   at ryan tester or you can contact lambda test  directly be sure to check out the lambda test blog   where you will find various blogs on a number  of testing topics including how to implement   more course and reports into your mockup tests and  of course be sure to check out the certification   section of the lambda test website where you can  learn how you can become land to test selenium   certified so that's it for this video thanks again  for watching and i'll see you on the next one hey guys and welcome back to the selenium  webdriver with javascript video series on   the lambda test youtube channel my name is ryan  and during this video we're going to be exploring   how we can execute our selenium webdriver  tests on lambda tests cloud-based selenium grid   now before we update any of our tests  we'll first take a moment to introduce   ourselves to lambda test and look at  what the key features of lambda test are   secondly we'll explore some of the advantages  of using lambda test then we'll have a look at   the lambda test portal and understand where  we can get our username and access key from   we'll need to add these to our tests in order to  run them then we're going to look at how to set   up our desired capabilities including things  like the browser and the browser version   after that we'll be ready to update  our tests and run them on lambda test   and of course at the end we'll do a full review of  everything that we've achieved during this video   so let's get started and look at what lavender  test is so lambda test is a cloud-based platform   that we can use to run our selenium tests  against multiple browsers and browser versions so   currently we've only been running our tests on our  local machines by downloading the drivers to the   particular browser we want to use in our instance  firefox with lambda test we can instead select   browsers and browser versions that we require and  execute our tests directly against them instead   of having to download multiple different browsers  and browser versions on our local machines   the advantage of using the lambda test platform  is that by doing so we won't have to maintain   our own locally hosted selenium grid so as  i mentioned we're only using the firefox   browser in our test so far but imagine if  you wanted to execute those tests against   several different browsers and several different  browser versions and operating systems as well   you can imagine that this will get quite  complicated to maintain over time ensuring you've   got the latest drivers installed and multiple  versions of the same browsers available to you   by using lambda test we can utilize the  thousands of different browser browser version   operating combinations they have and  just execute our tests against the   versions that we need to now  in order to utilize lambda test   in our selenium webdriver tests we'll need to  add a username and an access key to our script   before we can do that you'll need to sign up  to land test you can do that at lambdatest.com   by either selecting the pricing item on the  menu and then selecting the required plan or   you can use the start free testing option in the  top right hand corner now once you're signed up   and logged in you can access your account  and from your account you'll be able to   see your username and your access key if  i click up here and then go to my profile   here you can see that i've got my username here  and my access token and you can just copy out   both of these and use them in your tests  so along with the username and access key   which we've just retrieved we'll also need  to add a little bit more detail to our tests   around which browsers and browser versions and  operating systems we want to run those tests on   when we execute them on the lambda test platform  now the easy way to build those capabilities up   is to use the lambda test capability  generator so if you navigate to lambdatest.com   capabilities generator you'll see this  screen and from here you can define   the capabilities that you want to use and get them  in the exact format that your particular scripting   language requires so for example in our test  we're using selenium 4 and we are using javascript   so if i click here it then returns everything  that i'll need to add to my tests in order to   run them on lambda test with this browser so you  can see the selection at the moment is windows 10   chrome on version 192 but if i wanted to run this  on a different version of windows or even on mac i   could do that and then i could change the browser  accordingly so if i wanted to run it on edge   instead and maybe i wanted to change the version  you can see that the capabilities here are updated   based on what i've selected here there are other  specific things i can select as well if there are   special requirements that i need in my test but  for now let's go back to our configuration here   and we'll select windows 10 and this time we'll  run it on chrome so far we've only run locally on   firefox so we'll run on chrome and we'll do the  latest version of chrome the the beta version   we've made sure we've got selenium 4 selected  because that's what we're using in our and we've   highlighted javascript here to get this in the  right format so we can copy this to clipboard   and then we'll be able to use that in our tests  now that we've got our desired capabilities from   the capabilities generator we can add those to  our tests and configure our tests to run on lambda   test as opposed to running locally as they are now  so we're going to make a few changes to our tests   to start with i'm going to add a  brand new file and let's call it capabilities.js javascript file  and it's in the root folder of   our project and we're just going to paste  in the capabilities that we got from the   capabilities generator um which has all the  config we need to run on our chosen browser   in addition to what we've already got i'm just  going to change a couple of these values so this   build one we'll just call it test build  and the name we're calling it selenium test these values will make a little bit more  sense in a minute i've also got a username and   access key and obviously the the browser and  operating system details that we need to run   our tests cool so in order to use these specified  capabilities in our test files we need to first   export it from here and then we can import it  where we need it to export we can just use the   module dot exports equals curly bracket and then  inside here we can add the name of our variable so capabilities just like that so  this then allows us to import it   into our test files so we're going to be working  on our second test.js file so if i open that up   and right at the top here under our require  selenium webdriver i'm going to add a new   constant and i'm going to call this one  just so we know what it is i'll call it   lt for lambda test and capabilities okay lambda test capabilities equals  require and then we just need to specify the   path to where we can find our capabilities.js  file which is dot dot to go upper directory and   if i put slash there automatically brings  back the files and directories inside the   root directory of our project the one  we're interested in is capabilities cool so we've now required lte capabilities our  capabilities into our test file but we're not   using them yet in order to use them we're going  to write some more code under this describe block   so far in our described block  we've only used additional it   functions but you can actually write information  directly inside your describe and the advantage of   doing that is that it's then accessible by all  of your it functions so instead of specifying   something individually in each it's block we  can actually specify it directly and describe   and therefore we don't have to duplicate  that information across multiple tests   now we need to tell our tests how to connect  to lambda test so far we've imported the   capabilities but we haven't told our tests  how they can access the land test selenium   grid so we're going to do that now and the  information we need to include is username key and then a host and then by combining these bits of information  we're going to create the url that we can use   to access the lambda test platform this isn't  the url to our application which we have here   this is the url to the lounge test application  now username and key we already have we've got   them specified in our capabilities so we  can pull them out now so constant i'm going   to call this one username all in caps now  and this will be equal to lt capabilities dot capabilities dot the value for that  particular capability if i highlight this is user   dot user like that and then for our  key we can do a very similar thing   let's copy that this time we'll call it key and this time it is called access key so what we're just saying here is that  set the value of username to the values   stored in the user field of our capabilities file  and we're then doing the same for uh access key   now the name of the host we can access from um from the lambda test dashboard but i've  also got it here so let me copy it over like so we've got a new constant called  grid host and this holds our post   for now to test and we're then combining  these three pieces of information   to generate our grid host which is made up  of our username our key and our grid host so now that we've specified this information  we can use it to build our driver instance   so so far when we've created our driver instance  we've done it using this line here and we   specified the browser we want to use when building  our driver and we've actually got this line   specified in both of our it blocks which isn't  great for duplication it means if our browser   changes we have to change it in two different  places so this time when we build our driver   we're going to do it slightly differently we're  going to be utilizing another mocker function this   time called before each now before each functions  are really useful because they allow us to specify   bits of code to be executed prior to each  it block so if we specify information in   a before each block inside our describe that  before each function is going to be executed   prior to every dip block so it's really great  to add information without having to duplicate   it across the multiple hitbox in order to create  a before each we can use the same syntax as we   used for describe and it but this time we call  it before each we don't actually means that this is a function like this so we've got our before each block  now and it sits inside our described block   now in here we're going to  build our driver instance   in order to do that in our describe block  i'm just going to add a new variable called driver we don't need to specify the value because  we're going to do that inside our before each   block so it's going to look a little bit like  this so i'll just copy that and add that here   we don't need the await keyword because we're not  using a synchronous function then we're going to   do it driver new builder and we no longer need to  specify the full browser because we're doing that   inside our capabilities instead so we don't need  to explicitly say it here what we do need to add   is using server so new builder dot using  server and in here we need to specify the url   of the server and that's our grid url so we  can just add our bridge url instance there and lastly we need to use  our passing our capabilities   as well and we do that using with capabilities  and then inside here we're going to use   lte capabilities which we've required  up here and then it's lt capability dot   capabilities now this is getting a little bit  long so i'm just going to add this to a new line that's a little bit clearer what we're doing so  now as before we're building a new driver instance   but this time instead of specifying four browser  we're specifying the news server here and passing   in our grid url um for our labs test selenium grid  and then we're also passing in our capabilities   which is where we're specifying the the browser  and browser version and operating system that   we want to use cool so now that we're doing that  within our before each we no longer need to do it   in our it block so i can comment out that  there and as i mentioned this before each   will get run before each of the it blocks so i  can comment it out here as well so that's good   so far we're getting pretty close to being able to  run our tests on lambda test i'll just save this   so there's one final thing that i want to do in  order to tidy up this script a little bit more and   get rid of some duplication so i'm going to create  inside my describe block i'm going to create   a new function so i'll just copy this before  each and paste it but this time instead of   calling before each we're going to call after  inch now after each as you probably guessed   is much the same as a before each function it's  part of the mocker framework but this time the   code inside the after each function gets executed  after each its block and again we can use it to   allow us to add code in here that needs  to be executed after each of our tests   and means we don't have to add it  directly into each of the it's blocks   so it's really good if there are clean up tasks or  tear down scripts that you need to run after each   test to get ready for the next test so in our test  at the moment at the end of each one we call this   driver. quick method here in order to close the  browser and as i mentioned we've got this in   both of our tests here so what  we can do is add that to our   after each block instead and then we don't  have to call it in both of our tests so let's do that now so if i remove that and add that in here i'm gonna make this um an async function and we're simply just gonna  equip the driver as part of this after e   so we've removed it from this test and we  can also remove it from this test as well i'll just save that okay so now we've done  everything we need to do in order to run our tests   on land test the final thing i'm going to do is  make this second test pass so currently it fails   because we are writing the phrase learn selenium  but we're expecting it to be learn javascript   so i i'm just going to copy this here  um and it there so our expected actual   text will match now so both of these  tests should pass so if i save that   now to run our tests on lambda test we use exactly  the same method as we did when we're running   them locally just use the terminal and call our  npm test script so if i open up a new terminal and then from here into npm test now it's worth  noting that we haven't actually updated uh first   test.js so this test is still going to run on  our local firefox instance so we should see   one browser recently to launch and run our first  test.js but we won't see the browser instances for   second test.js because they'll be running  on lambda tests instead so if i run this now we should see that our one firefox instance  gets launched and that's our first test but   if we go back we've already got three passing  tests but we only saw the firefox instance   launch for this test here so to see what's  actually happened we can head over to   the lambda test dashboard and have  a look i just refresh this now   you see on this recent test section we have two  tests and the build is called test build and if   you remember that's what we had detailed  as our test build in our capabilities   if i click on one of these i can then get a little  bit more detail so you can see that i've got two   tests here both of them have called selenium tests  so maybe we'll correct that in a minute to make it   um a little bit more useful but both my tests have  passed and if i click on this one here for example   i'll also get this video which i can play to  see exactly what's going on so that's my test   um to add learn selenium and  highlight this one press play   this is my learn javascript test so you can see  that both of these tests have been executed on the   lambda test platform against the chrome browser  on windows 10. so it's a little bit annoying that   both of these tests have the same name this is the  name which actually comes from our capabilities   file but it doesn't make it very clear as to which  test is which so we can make a quick change to our   script so that instead of returning this selenium  test name it sets the name to the name of that   particular it's block so for example this here  it's super simple to do all we're going to do   in our before each block here we're going  to add a new line let's start which will be lt capabilities dot capabilities  dot name so this is the file that we're requiring followed by the  name of the variable variable in that file   this capabilities followed by the field  we'd like to change which is this name field   so lt capabilities.capabilities.name equals this   dot current test which exposes some information  about the test which is currently running   dot title and in our example the title would be  the name of the it block so if i save that now and rerun our tests we can jump over to the  lambda test dashboard and we can see we've got   two new tests if i click on here it displays  them and now we can see that we've got the   more useful names based on the name of the it block so that is it for this video  and we've finally been able to run our tests on   the lambda test platform which is a really great  achievement so if you wanted to discuss anything   or needed any clarifications then you can get hold  of me on twitter using the handle at ryan tesla   alternatively you can contact lambda test directly  and they'll be able to answer your queries   if you've enjoyed this video  and you want to learn a bit more   why not visit the labs test blog where there  are literally hundreds of blog posts on various   testing topics that may interest you also  check out the labs test youtube channel   where you can see more of these videos including  a new video series on cyprus with loud test   if you're interested in certifications visit  the certification section of the lambda test   website and you can learn all about um  selenium so that brings this video to an   end i want to thank you again for  watching and i'll see you on the next one hey guys and welcome to part eight of the  selenium web driver with javascript video series   on the lambda test youtube channel my name is ryan  and in this short video we're gonna be looking at   how we can run our tests in headless mode now  this is kind of a continuation of what we've   looked at in the previous video so we've looked at  how we can set up our tests in order to run them   on the lambda test platform now  we're going to be doing the same   but we're going to be adding a headless capability  in order to run our tests in headless mode   now before we do that we'll have a quick look  at what we mean by headless testing what the   advantages of running our tests in headless mode  are then as i mentioned we're going to be updating   our capabilities that we added in the previous  video to include headless once we've added that   capability we'll re-run our tests just like we did  before make sure they're still working and then of   course at the end we'll do a quick round-up of  what we've done during this video so let's get   started and have a look at what we actually  mean by headless mode and headless testing   so when we say headless testing what we  actually mean is running our ui tests   on a headless browser and a headless browser is  simply a browser which doesn't have a graphical   user interface or gui and therefore doesn't  actually render the page visually for us to see now the advantage of this is that when  we run our tests and we don't have to   wait for everything to load up on that page  in order to continue our tests so there's   lots that are going on behind the scenes to load  all those images up and present that to the user   but when we run our test headlessly we don't need  to worry about that and that means our tests often   run faster in a headless browser and are less  flaky there's less things that can go wrong   so they tend to be a little bit more robust as  well now the trade-off is that nobody actually   uses a headless browser to view a web application  because you won't see anything so it's important   to still test your application using the  traditional browsers as well headless is not a   complete replacement for the traditional browsers  but it is a great way to run your automated tests   more robustly and quicker and perhaps earlier on  in the testing life cycle as well in order to find   bugs so in order to run our tests headlessly in  our local system we can pass in a headless option   when we start building our browser instance but  we're not going to do that we're going to be using   the lambda test platform to run our tests  headlessly and it's really simple to do   first up we're going to have a look at the  desired capabilities again so we went through   this in a little bit more detail when we built our  capabilities for running our tests in the previous   video so we're not going to go through everything  again but i do want to draw your attention   to one option so if i just select javascript  and selenium 4 because that's what we're using   so previously we selected the relevant operating  system and browser and version that we want to run   against and that's worked fine so far but there  are a whole host of other options that we can add   to our desired capabilities so if i have a look at  this advanced configuration here we can do things   like turn on uh console output and you can see  that it adds a new value here to our capabilities   change things like the time  zone or add screenshots for this video though we're going to focus  on a chrome specific capability so if i open   this bit up here you can see that i've got this  headless option and this is simply all we need in   order to run our tests in headless we need to add  this headless value to our capabilities and ensure   it is set to true now headless isn't available  on all browsers so if i change my browser to   firefox for example you can see that we've got  headless available here as well but if i change   my configuration to something like mac and then  pick safari as our browser if i have a look here   we don't actually have a headless option available  to us when we're running our tests on safari   so if i go back here and i've changed this back  to what we had previously which was chrome and   set this to headless so that gives me the  option that i need so now we can take this   because we've already got our capabilities set up  i can just take this single one that i need here   go over to our project and in our capabilities.js  file where we've stored our capabilities i can   just add another capability here okay headless  true make sure you've got the uh comma there there we are there we have it so our capabilities  have now been updated to include the headless true   the headless option here which has been set  to true now that we've set headless to true in   our capabilities we can run our tests in exactly  the same way as we've run them previously   i am just going to change our build name in our  capabilities and this is just to make it clearer   when we look at lambda test which build is  our headless build so i'll change this to   headless and save that and i'll run  them just by opening up a new terminal and using the npm test command   i'm running this so nothing else has changed here  we've still got three tests which will be run   one of them is going to execute locally which  is what's running now on firefox and the other   two as per our previous videos will run on the  lambda test platform now of those two that run   on lounge test we're expecting one of them to  pass but the second one we're expecting to fail   because we're writing learn selenium and then our  validation is checking that that value is learned javascript so we know that one fails  and i've kept it exactly the same   so we can see that nothing else has  changed even though we're running   headlessly our tests are still doing exactly the  same validation as they were doing previously   so now we can jump over to the learn to test  dashboard if i just give us a little refresh we   should hopefully see our new build here here we go  this is our headless build so if we click on this we can see we've got our two tests both part  of our headless build both have been run   successfully but you can see now that we  haven't got the video output that we had   previously and this is because we've run our tests  headlessly and of course our website isn't getting   rendered in any browser so therefore it can't  take a video of what we've actually done   but we can see from the test results that we've  got exactly the same results as we did previously   so that about wraps up this short video it's a  really neat trick to be able to run our tests   in headless mode very simply by just updating  a config parameter in our capabilities   we haven't had to update any tests whatsoever so  all we did was in our capabilities.js file here   we added headless and set that to true and  then when we had to look at this in lambda   test we could see that this was actually running  headlessly and nothing else has changed at all   so thanks guys for watching this super quick video  if you had any questions or queries about what we   did during this video then you can get hold of  me on twitter using the handle at ryan testa or   of course you can contact lambda test directly  should your attention to the lambda test blog   where there are various blog posts on javascript  and other scripting languages as well there's even   some posts around how to run headless tests as  well so if you wanted to check out those as well   head to the louder test blog or you can check out  the lanstatt's youtube channel to find other video   series including a new one on running your cypress  tests on the test platform if you're interested in   getting yourself selenium certified then make  sure you check out the certification section of   the lambda test website where you can read all  about the certifications that labs tests offer   but for me this is the end of this video i'd  like to thank you again for watching and i look   forward to exploring more about selenium  webdriver and javascript on the next video   hey guys um welcome to part nine of this selenium  web driver with javascript video series on the   lambda test youtube channel my name is ryan and  as ever i will be guiding you through this video   which this time is all about parameterization now  during this session we are going to first look at   what we actually mean by parameterization  how it can be used to enhance our testing   then we're going to look at creating a brand  new test and adding some parameters to that test   then of course we'll run that test on the  lambda test platform and finally at the end   we'll do a full review of everything that we've  been through during this video so first up what   is parameterization so parameterization or  parameterized tests are a really neat trick to   enable us to use a single test and run it  multiple times but for different data inputs so   in our current test suite we have multiple tests  to add different to do's to our to-do application   now they work perfectly fine but there is a lot  of duplication in that code so we have two tests   which are very very similar the only difference is  the input text that we're using to add our to-do   it would be great if we could remove some of  that duplication and just reuse the same test   but instead pass in multiple values to it and we  can do that using parameterization the advantage   as i mentioned is that we get rid of some of the  duplicate code that we're using and that means if   that code changes in the future we need to change  it in fewer places so it makes the whole test week   more maintainable now the other place we can  use it in our test suite is to parameterize   the browsers that we're testing our application on  so when we're using the lambda test platform we've   seen how we can use the capabilities to  specify the browser and the operating system   and the browser version and run our tests on that  specific setup now we could use parameterization to loop over our to-do test multiple  times for different browsers   and therefore we don't have to run our tests once  and then change the capabilities and run it again   we can just allow these capabilities to be  changed as our test is looped over multiple times   so in this video we're going to look at how  we can use mocha to parameterize our test so   for the purposes of this video we're actually  going to create a brand new test in our project   so our first test.js and secondtest.js are  going to stay as they are and we won't touch   them instead we'll create a brand new js file with  a brand new testing now there are multiple ways   we can achieve parameterization using javascript  and the mocker framework there's several different   packages that we could install which  allow us to utilize parameterization   and additional functionality in order to enhance  our tests now in this video i'm going to use a   simple approach using mocha and javascript  only i'm not going to be installing any   additional third-party packages so what we will  use is this for each functionality which will wrap   around our it's block so we'll wrap around  our test and basically what we'll be doing   is saying that for each of our browser and  version and operating system combinations   we run this test and we won't have to do any  manual changes after we've run our tests on   a single browser it will automatically just loop  through and run that test for as many combinations   as we specify so to get started we can actually  create a brand new test file let's call it uh and that's inside our test directory  and we can actually take what we've   already got in our second test.js because  that's what a lot of the configuration   already in so i'll paste  everything into our paramtest.js test file and now we're actually going to run our  parameterized test on just this first it block   so i'm actually going to remove this second  one to make everything a little bit more simple   let's get rid of that perfect  so we've just got one test   in here at the moment and secondly i'm  going to remove our before each block   and our after each block as well now i'm going to  add this functionality directly into our it block   and the reason is that we need to be  able to update our lte capabilities file our capabilities here on the fly and when we  use the for each block that we're going to   use in a minute it gets a little bit confused  with the before each blocks um and it doesn't   update it in the way that we need it to update  so as i mentioned previously there are other   third-party packages that you can use to achieve  similar results but because we're using the for   each functionality it's easier and a  simpler way of showing you how this works   is to remove our before each and  after each block for this test so our ads are before each functionality  back into our it block here and at the end of our test we'll quit the browser copy that and paste that there okay so we know   now no no we need to use our before  each and after each block here so we've got our test which will build the driver  instance using the capabilities and run our test   and close the driver so first up we need  to specify the browsers and browse versions   that we want to run our test on and i've  already done this so i'm going to paste it here   directly into our describe block above and outside  of our test and basically what we have here is   a json array which contains three objects and  each object contains a browser a version and an   operating system combination so you can see  that we've got chrome version 93 firefox 91   and another firefox incident on version 90 or  using the windows 10 operating system so now we   have this list we need to tell our test to  re-run for each object in this array so we could   have more objects in here if we wanted to if you  wanted to run it on additional browsers we can add   new ones into here at any time equally we can  remove them from here if we no longer need them   and our test will just loop over for each object  in here so in this instance our test will run   three times once for each of these now in order  to run our test multiple times we're going to   utilize the for each functionality that we saw  in the mocker documentation a few minutes ago   so just type browsers in reference  to the browser's array here dot four for each and then some brackets and  then inside here we need to   pass in the values that we want to use  inside our test so we want to use the browser   the browser version and the operating  system so we can pass each of those in browser comma b version for browser version  and os for operating system   and then this is a function let's do that and open  up the curly braces okay so this is our four each block and this needs to wrap around our it  block so at the moment they're completely   separate so we can do one of two things you can  either copy all of the code from your it block   inside of this for each block or you can move these brackets here to the bottom of your test like so make sure you delete  them from here as well so there we go so now our it block is  wrapped inside of our browser for each   block here so you can see that everything between  these two is our test so the final thing we need   to do is to ensure that our test updates our  capabilities before it builds the driver instance   so we've got our capabilities that  we use to run our test on lambda test and inside of our test we want to update the  values much like we do here so so if you remember   previously we're using this line of code here to  update the capabilities name this value here to   the name of our particular test so we're going to  do the same now but update the values for browser   platform name browser version and browser name  so these three values here so we'll use the same syntax as we've used here if i make my  screen a little bit bigger so we can see   so we'll do lt capabilities dot capabilities dot and first of  all we will do platform name and then we'll say that equals the os and then we just need to do that two more times like say and this second one becomes browser name and then browser version brow the name comes from this browser value here and then browser version comes  from this beam version value here   which ultimately comes from  this set of values here okay so basically what we're saying here is  that update the capabilities the platform   name in capabilities to whatever os version  is passed in depending on which values we're   iterating through and do the same for  the browser name and the brown subversion just because we've moved this line inside of our  bit block we also need to just change that so just remove it from here and just delete  that and instead becomes this test dot instead of current test okay so that's  basically all we need to change so we've   got our list of browsers we've added this  for each function which wraps around our which wraps around our it block and then when  we go into the it block to run our test before   we build our new driver instance using these  capabilities we update the values here so one   other thing we can do is just to make it a little  bit clearer we could actually change the name   of our it block based on the values that  we're passing in so successfully and a a to do for browser then we can do dollar sign braces and here  we can pass in the uh variable that we're using so browser and then let's do another one of those for browser version and then one more for os so now that when we run this  test it's actually going to print out   the values of the browser in the browser version  and the operating system as part of the title of   the test uh which will make it clear if one of  those tests fails and make it clearer actually   where it where it has gone wrong and which  which browser it's running in that particular   particular time perfect so we can save this and  then we can run it and see what it looks like so now that we've created our new parameterized  test we can go ahead and run it and we'll have a   look what it looks like on the console and also  we'll go on to the launcher test dashboard and   have a look at the test there's so if i before i  do that if i just come over to my tests and i'm   actually gonna switch headless to false just so we  can see what's going on when we get over to lambda   test so i'll save that and then i can open up a  new terminal and we can go ahead and run this so so instead of running everything i'll just run  our new param test.js file so to do that we just   use npm test again but this time i'm going  to pass in this particular file using the   uh relative path to that so that is test  because it's in our test directory slash param test dot js let's run that so it's going to run exactly the  same command as we've run previously   but just for our param test.js file and it will now be running on the alarm to test  platform and we should see the results of that   printed in the console any second now perfect so although we've only got   one test inside our param test test file you can  see that we've actually got three passing tests   and because we've updated the name to include the  browser and the version and the operating system   you can see exactly what's run so you can see that  first it's run the test on chrome then it's run on   firefox 91 version 91 and then on firefox version  90 and thankfully all three of those tests have   passed so if we head over to the lambda test  dashboard you can have a look and we should have   some new tests here so you can see that  we've got one here for firefox version   90 version 91 and then our chrome version here  i'll just drill down into one of these tests we'll see the details here we go again you can see what version  everything's run on and because we're not   running headlessly we've got the um video  as well so we can see exactly what's going   to see that's run on firefox as opposed to  this one here which runs on the chrome instance   so let's take a brief moment to review what we've  done we can basically split up the changes that   we've made into three parts firstly we added an  array of all the different browser versions and   operating systems that we wanted to run our test  on we added it directly to our described block secondly we added this for each function and  wrapped it around our it block so our it block   our test sits inside this for each function  and in that for each function we passed in   the values that we wanted to use so it's basically  saying for each browser and version and operating   system in this list i want you to run this  test and finally we updated our tests to set   the capabilities for these values on the fly so  each time we run the test we set the platform name   and the browser name and the browser version  based on the values that get passed in here and then we build the new driver instance now  so that is it for this video where we've learned   a neat little trick to parameterize your  mocha selenium webdriver test in javascript   thank you for watching if you have any queries or  questions about what we've achieved in this video   then you can get in contact with me on twitter  using the handle brian tester or you can contact   louder test directly alternatively leave a comment  on the youtube video and we'll get back to you   with an answer now if you're like me and  want to learn more then go and check out   the lambda test blog where there are  new articles being added every week   there's so many different testing topics including  running selenium web driver tests in javascript if certifications is something you're interested  in then check out the lambda test website   where you can get a full list of the  certifications that land tests offer now that's   it from me so thanks again for watching this  video and of course i'll see you on the next one you

Channel: LambdaTest

Views: 122,473

Keywords: selenium javascript tutorial, selenium webdriver javascript, javascript, unit tests, integration tests, e2e tests, ui tests, unit testing, javascript testing, js testing, js tests, js unit tests, js integration tests, parameterized tests, mocha parallel tests, mocha end to end testing, automation testing, cross browser testing with selenium, selenium webdriver, What is Mocha testing?, Does Mocha run tests in parallel?, software testing, cross browser testing tutorial

Id: BQ-9e13kJ58

Length: 167min 49sec (10069 seconds)

Published: Thu Dec 23 2021