Print Countersignature Dropdown with airSlate SignNow

Print countersignature dropdown

hi there welcome to qa box let's test and this video we are going to learn how in cyprus we can work with different type of drop downs so this is the page that i've created i've already exported to this github project so you can download it from here now what are the different type of drop downs that we have these days and it is important to understand this because the way you are going to interact them depends upon how they are built so this first category is the traditional way of creating the drop downs now to create this drop down all you have to do is you have to write this code so you have this select element all right and inside this you have got these options now here the path that we have to understand is we have got this variable attribute and this is called as the text now cyprus offers us this command select and you can select an element from the drop down based on its value as you could see in here or you can also identify an element based upon its text so we're going to see both of these then the next step is these are all single select drop down now you also see elements like these all right so in here you can do multiple select now how do we make multiple select drop downs this is again the traditional select element the way you enable multi select is very simple you just add one attribute which is this multiple and then the size is equal to 10 basically decides the number of elements that you want to show these days we also create custom drop downs for example like this so we usually call them auto completion so what happens is in here let's see if i start typing a n right i see this list of countries right i can select one country by double clicking on that and now you see that thing is being selected so this is called this auto completion so the moment you start typing all the relevant data is being displayed to you and then you select one from that list okay but this the thing is this particular element is not the select type element so let me show you this in the code this is that element and in here this is an input type element this is not the select time so how are we going to work on that so the thing is it's very simple and straightforward if you understand that this is input type so basically you have to use the command type instead of select and that's the whole thing in here that's a whole trick so if you are working with select type of element then only that select method is going to work but if you are working on the customized drop downs so then depending upon what the element internally that is right you have to accordingly choose the actions all right so now let us look at the last one so in here this is a select type drop down right but then i have used a jquery plugin chosen with the help of this i have given this look so you can do it like this so now you can select multiple options and the beauty is the moment you select one option from this list that becomes disabled so now you can do it like this all right so these are the different ways we can have a drop down element added to the web application now we have external websites also available like this so in here you see that this is a drop down you click on that you see a list of options but if you identify this particular thing it is not the traditional drop down so you see this is a div which has got some anchor tags and so on and all these options that you are seeing in here are further the anchor tag what happens is when you click on this it is going to launch a new web page all right so this is going to launch this website in the specific language same way you have google in here right you start typing something and then you get all these options all right uh this is the website again uh these are the traditional drop down you can work on these dropdowns as well and this is one more website so in here you type something like this and it is going to now display you all the option and then you can select an option from here so we are going to write just cases on all of these but first thing first let's understand this so we said that in the traditional drop down we have the value and the text so if i want to fetch the value and the text how am i going to do that in the console so there are two ways essentially we have the javascript way and also the jquery way because i'm using jquery for this web page all right so now the thing that we have to do is we have to this is how we are going to do that so this first element has got the property value and the value of that value is let us see that so let me inspect this in here so this is the drop down all right and currently medium is being selected right and in here you see value is equal to 3 and the text is equal to medium and this is again an interesting one so we also have one more attribute which is selected and we are going to make use of it all right so whichever element is being selected you get this attribute set to that and we are going to make use of that because what we want to retrieve is the value of this selected item so the first thing is you're going to identify that element so this is how we are going to identify the elements so now we have got access to the speed element right now if i want to access let's say the value of it so the method that you have to use is value and if you hit enter so you get the value all right but then now how i'm going to access the text of it so if i just say speed dot text let me show you what is going to happen so this has returned me the text available in all the options but i want to have the text only for the selected option then how i'm going to do that all right so this is what you're going to do you're going to say speed dot options speed dot selected index and then you are going to say text so then you get this value medium okay so this is how we can fetch the text of this drop down using the javascript train now let's do it by the jquery way so jquery way is simple so you just have to identify that element so the element has got the id speed if you want to fetch the value of it so you're going to say val and hit enter you get the value if you want to fetch the text again i mean there's a text method available but there's a problem if you do it like this you see the whole text right so then how are you going to do that same way like in here we pick the options and then we pick the selected index so in here you just have to say options and then colon and select it all right now so not options you have to say options so speed option and colon selected and then you have to invoke the text method so this is how you're going to get the text so now let us do for the multi select and let us select india britain and algeria in here okay so first we have to identify the drop down so we are going to say this so through this we can identify that element the next thing that we have to do is we have to identify all the selected options so for that we have to say dot selected options okay now we have to save that into a variable so i'm going to save that into a variable like this okay and now we have to use the for each n spread operator so i'm going to spread the values that are currently there into this array and let us use the for each so we have this for each and we are going to log out the values of the selected options so we do this we get india britain and algeria all right now let us find the text so the way we are going to do that is we are going to say a and dot text and let us hit enter so we get the text as well okay all right now let's do it the jquery way so we have to identify this element and the method is pretty simple straightforward so you do this you get the array back all right but if you want to do the same using the text method just like uh in the previous case you are going to get everything back but this is not what you want you want the selected one all right so you again you have to use option colon select it and then it is going to give you this right it is a string see that all right now let's move down the code part and do this thing there so we are visiting the website and we have to identify that element to identify that element we are going to say cy.get okay and we have this id speed course has to go inside the codes all right now we have to do the select operation all right the command is select and let us look at this command so there are two versions of this method available and you could see the first one is saying select an option with specific text and the other one is specific value therefore there are two test cases one is for the text value other is for the option value okay so in here we are going to do what we are going to pass in the text so there's a text first all right now let us do this so then we are going to use should and we are going to pass in the callback so let us pass the callback with the argument el whatever is that is being returned from here and let's do it the javascript way first so how are we going to convert this element into the javascript so it's very simple so we're going to say const el is equal to let's refer this el and this is how we convert the jquery object into javascript object okay so now we have got this element and now all we need to do is let us write expect to el dot options like we did in the console and then el dot selected index okay and this is going to return you what the value and the value in this case is four we copy the same and this time you want the text so we are going to say in here dot value and in here it has to be text and the value has to be what the value has to be fast okay so let me use only in here i think we have we are set in here so let me execute this and see what happens okay so you see fast is being selected and here also we have the text so that is something that i have to write yeah let's write the assertion as well okay so how to assert that element so we have this cy dot get and the element is let me so i select this and i get this value so let me inspect this element so we have got this div id select speed so since this is a div it will have the text so let us assert the text should have the text first let's run this one more time okay so now we have three assertions so it's referring to this one all right so it works okay now let's do the same for the jquery one so we have to comment this out so this is my element okay and there's a method valve okay and in here you just have to use one more method that method is find so what are we going to do we are going to say find and find what option selected option selected and then we want to fetch the text of it okay so we are done so let us execute this now and see if it works all right so now it is working the jquery way as well okay great what is the third way the cypress way so let's do that now if you understand these it's going to be easy for you to understand that so i'm going to comment out everything now we got to find what option selected all right so we find that now let us save this and now what we have to do is we can invoke certain methods all right so let us invoke the method which method so first of all what is this invoke now let us see the definition of this invoke a function on the previously ended subject as we know that cyprus is making use of jquery so the element that you have is the jquery element so therefore you can invoke those jquery methods that are available onto that element and one such method is of course text so let us invoke the text method okay and once that method is invoked right it is going to return you as you could see the string all right so if you're using text it is going to return the text which is going to be a string now you the output of that is a string so let's assert that so we are going to say should and then equal equal what fast right now we have got what one more thing that we have to test and that is value can i do the same for value as well yes i can but not in this particular way so if i say in here invoke well and to be equal 4 see i mean this is going to error out so let us run this and see the first assertion would pass but the second one would fail because the thing is this invoke is invoked on a previously yielded subject right and i mentioned that invoke is used to invoke the jquery methods that are available on the jquery object but this has returned us a string and hence we can't do it like this so now what is the solution right either you can write this much line of code again or you can go for alias so that we can use it again and again so i'm just going to use an alias and i'm going to call it as let's say speed okay and now all i need to do is i just have to say cy dot get and let us invoke the alias so i'm just going to say at and speed i'm going to do the same before this okay so now if i run this and run this again so you see both of the assertions are being passed all right so we have learned this new method which is invoke which is used to invoke the jquery methods available on the jquery object okay and two such methods are text and value and we have executed both of these so let us add skip in here and move to the next test case so now we are going to do the same with the options but this time because i've explained all the three ways so i'm just going to skip some of those and you can try those things on your own okay so in here all you need to understand is the only thing that you're doing in here is now you are passing the value and not the text so let us look at this element in here so we have this select drop down the only thing is we also have got this opt group and now see how does it look on to the screen so now you see there are some categories but they are not selectable you can only select these options and not the option groups so we have grouped these two values under script and same with these two value under other files and in here if you see the value and the value is jquery but the text is this in some cases and don't be confused in some cases the value and the text would be same so you should be very clear about whether you are testing the thing based on the value or the text because at times the value could be different in here the value and the text is different and in this example also the value of the text is different so what i'm doing is i am now selecting this text on the front end with the help of this attribute which is not visible to the user all right but it is you will find that in the dom so the test case is pretty simple there is no change at all you just have to pass in some text and this time it is just a value right and i have commented the jquery way and this is the javascript way through which you can do that now we know all this what is an option what is a selected index and so on so i'm simply executing that and showing that there is no difference all right so you see some known file unknown file is being selected and you also have this div which contains this text whatever that you select in the drop down and hence all of these things are being passed right so let me set skip on this and the next one is auto completion drop down built using input type is equal to text okay now the type is not select all right it is input type is equal to text so now we can't use the select method okay and therefore we have to now use what the input specific methods okay so let us do this now so if you go in here this is what we are going to work on we have got this input type the moment you see that it is very obvious that the select method in cyprus is not going to work for this okay so let us now start working on this so if i say and let us why not prove that so we have this one now let's enable this test case so we have we say cy dot get so let us fetch the id of that so the id of this is my input so let me come in here and say fine put this and if i use the method select okay and i pass in the value india okay so let us do this and run the test case so we are going to get this error and you could say c by dot select can only be called on a select type element and this is an input type and it is telling that the subject that has been yielded is of input type so it is not going to work so then what are you going to do then you are going to use obviously what type in here so i am changing this to type and i'm going to do few more things because in here right if i say i ing i okay i have to use the down key once and i have to hit enter and then i have to focus out okay and then you see that drop down list is gone all right in some cases you've got to do that so let us do that now so how are we going to do all of that so instead of typing india i'm going to say indi all right and then we are going to use some options which are down arrow and i also need to hit enter okay so i'm going to say in here enter now we have typed into the value but like i said we have to focus out now the method for that is blood okay so this is going to take the focus out from that and now all we have to do is we have to check whether that feel has got the value or not all right this basically is this particular element but i want to check whether this field also has the india value or not now for input we have this have value not have text because text works on the text node all right so for input or whatever value that we enter gets stored inside the value property okay so therefore we have to say should and we just say have dot value and the value has to be india and see the thing is i have only typed ind i n not india right let's see if it is going to work it should all right so now you see india is being selected and the assertion is also being passed and this also is passed right so div also contained this value right so i hope uh it is now clear that though it looks like a drop down but it is not a traditional drop down hence you cannot follow the traditional approach you're not going for that select method all right so let us skip this test case and move on to the next one which is multi-select but this time we have got the select element which is a traditional element now it's very simple now when in the select you can also provide in the arrays all right besides just one string so what we are doing is we are going to select these three values and then we are going to invoke this function which i just showed you in the console and then we are going to run this now the thing is instead of equal you have to use deep equal because there are two type of comparison operator in javascript one is a strict equal the other is deep equal now array is of reference type so if you do the strict equal because they are not two same objects right so it is going to fail because they are two different objects they are not the same object therefore you have to check the content so when you do do it deep equal you are using the double equal to not triple equal to and hence it is only going to check for the content and not for the reference so let us run this and see so you see three values are being selected and we have also checked all the three values okay so the assertion is being done now how are we going to test the text part in this particular case because there is something different that we have to do right and the concept is pretty much the same basically so let me just copy this out and for the time being let's comment this out now let us start making the changes so when you do this whenever it comes to text we know what we have to do we have to say option colon selected that's the bare minimum that we have to do okay and now all we have to do is we have to move them right and the thing is we saw in the console that instead of returning the array we got the concatenated string all right so therefore we got to do a change in here so we have to join the values within this array and this is the separator that we are going to use now let us see what are we going to get okay so you see usa india angola to deeply equal this all right in here i suppose we can also use equal to because this is a string there you go right so it works all right so let us look at the next thing let us skip this test case move on to the next one all right so this is the one wherein i have used a plugin so let us look at this so this is the one that we are going to work on and at the end we are also going to click on the cancel button so that i can remove that safety okay so in here let us change the script to only and for the time being let me just comment all these out and again we can think that it is a select and we can simply run our test cases we can pass in multiple values and then simply we can check these values right like that but the thing is you know let's look at this drop down so this is my drop down this one all right it's a select one and everything looks okay but then there is a problem so let us inspect the this one here i do the right click all right and in here you have this select but under that you also have the div and everything is happening in here all right so if i select a value like this so you see that value is now being added to the input right the value is being added to this ui alive which is not under select okay under select you have this but the value that that is being added in here is different it is not that it is not inside that select it is different right it is inside that div you have this ul and the uli and you get this right so this is how you have to to work on that and to be more specific you could see that you know this this united state is actually pasted on top of this input okay which is of type is equal to text but when we actually created that right in here we did not have any div right we have not used any input or anything like that the thing is you know i have made use of a plugin and the plugin is doing the job for me all right so therefore my approach has to be different if i run it like this it is not going to work so you see uh i do not see an error in here but nothing is being selected in here all right it has passed everything but nothing is being chosen right so therefore you know i need to understand the element that i'm interacting with right so i'm going to just comment this out and uncomment my other code okay so now if you look at this okay so what are we doing so we are finding that element okay and then we are simply typing then hitting enter typing these values and hitting enter okay and then now the thing is the interesting thing is we are adding values right to that input box but they are once they are added to the input box right they are then given to that drop down and therefore you know now when i have to run my assertion i have to run my assertion on the drop down and that's why i'm saying that you have to understand how your developers has designed those things and these days you know they don't design these things they go for plugins or any other external ui design libraries and they that has simplified their job a lot but then you know we have to understand how that element is ultimately converting into the html element so you see i'm entering value in here in the input box but then checking the value running my assertion on the selected drop down okay now see it is being passed and you also see all these values are being selected in here let us read on that you see the values are not selected and this assertion is also passed now the thing is i want to delete one of these values so then how am i going to do that and now see again it's very interesting now you have to understand you have to find the element on which you have to click to delete that okay and of course so the phenomenon would be very simple you have just have to find find that element and you have to click on that okay now let us find that cross button and again that too is coming from the jquery plugin that i've used chosen jquery plugin so let us open this and let us identify this element so this is an anchor tag all right so i can click on an anchor tag and all right so united state is also correct so this is in li okay and this li has got the class search choice so let's start from that then with the help of this text we can identify the span and then we can this is the neighbor so sibling basically so i can say next and which is going to take me here and then i'm going to simply click on that this is what i have to do so let's write the uh the selector for that so it is going to be let me select this let's go in there so we have to say li dot this okay so that is going to give me the li now i have to look out for a span okay which is the descendant of this ally and i have to look out for a span which contains the text albania let's say i want to delete that so i have to copy this this right so you can also use this if you if that is not clear uh go and check out my my jquery series then i've explained all these lectures all right so now i am on the span and i want the sibling of it so i want if i want the next sibling all i have to do is i have to say next this is the method and i can also pass in a selector here and my selector is basically the anchor tag and i'm going to click on that okay so now i'm deleting the albania let us save that and rerun if it works all right so you could see that now at the end there are only two so this has clicked on this lbn all right and that is gone so quite interesting one right so we entered data into the input element then we ran our session on the select element type and then when we had to delete the value you know we identified that li but actually you see when i created that okay when i created that control all i had to do was this and then i added some classes in here chosen select and that has done all the job for me all right so let us switch this to skip and move on to the other one so this basically is working on the select drop down single drop down and all we are doing is we are just selecting the pdf file okay from the drop down so it is going to launch this go and the drop down would be somewhere here currently we have the text file once the page is loaded currently the page has been loaded once this is done we'll have this pdf value there you go all right simple enough switches back to skip another one is google uh this is again quite interesting so you see what we are doing is we are visiting that page we identify that and when we are typing javascript into that and then we see a list of results and this is auto completion type and all we are doing is okay we are finding all the allies of this class and then we are finding all the descendants spam and span has got uh these values all right so then i'm using the command uh contains and i'm finding all the span which has got the javascript compiler so let's uh do that first thing here so if i say java script just this one okay in here i'll see the option javascript compiler this one and i'm going to click on that all right if i can spell this correctly all right i'll get javascript compiler and i have to click on that simple enough so uh at times you have to also use the uh force is equal to true could be that edges are being you know overlapped by other elements and because of css also at times this happen so in this case i have to use this so i'm simply going to run this and see if it works there you go so we are starting typing javascript and now we have selected the javascript compiler and we are on this new page great let's switch it back to skip and move on to the other one this is the travel website when we have that language drop down and we have to click on that and in here you could see that uh you know that is a div element so we are simply clicking on that which is going to open the drop down and that drop down has got the anchor with the class this and there's a list of those anchor items and we just need to look out for the one which contains that x rc and then that website would be uh opened up in the farsi language pretty simple right but this is not a select so let us see that there you go the side is website and we are going to click on this right let's see so yeah and you see i clicked on that now the site is launching in a new language and this is fuzzy all right so let's switch it back to skip and let's run our last test case and in here what are we doing again you see the element type is input okay you're typing something into it and that is going to then launch certain divs which i've got these class inside there you've got a lot of allies so allies are the list of items right and now you have to identify this one okay so contains um you know printed chiffon and then we are clicking on it let's run that so that this is basically the trick right so you can't use the select method in every case you can select use the select method only when you are working on a traditional drop down elements okay i see this has been changed but if it is not a select then you have to identify okay what type of element is that and based on that you say okay okay if element is of type input for example now what i can do is i can type into it for example if the element is of type let's say check box what you can do you can check on it you can also click on that right so not every operation is applicable on every element type so i hope you like that thank you so much