Transkrypcja: Simple web table calculation | Playwright Typescript tutorial - Part 93

Opis wygenerowany przez Skrybot

Dla tego filmu nie wygenerowano opisu.

Transkrypcja wygenerowana przez Skrybot

Hey guys, my name is Kaushik and welcome back to Let Code. So in a previous video, we learned how to handle a very basic table. In this video, we're going to learn how to do the calculation that arithmetic operations. For example, here we have a scenario like add all the prices and check if the total is correct. So it can be like your static data or else dynamic data as well. But the concept is going to vary same. So we have to find like number of rows, number of columns, and we have to get all the price list and then we have to check with the total. Okay. So let's go and inspect this.

Let's see what we have here. So if I go to this particular table, which has the ID called shopping, so I can probably go with the CSS of shopping. Okay. Let me take the table first. So here I'll say like const. table and it's going to be like page. locator of this thing. Okay. Now, if you see this table within this, we have like header tag. So we have like headers and then we have the body and also the footer. So the footer contains the total. Okay. So here you can select, we have like total as a text and the value. Okay.

And within the body, of course, we have all the list of item and the prices. And within the header, we have like item and prices header, basically. Right. So first of all, we have to get the body. Okay. So we have to get the body, right? So here I can say like const. table body equal to page dot not page. I can go with the table. So table dot locator of the body, which is t body. Okay. And then of course I want to get the footer as well. So let me store it like t foot, okay. So from the tip, we are getting the footer as well.

Now what we're going to do is we are going to find the number of rows and the column. Okay. So in previously we use like two loops to iterate through each and every rows and column, right? But in this case, we have only like two columns. So I don't have to use like multiple loops, I can just go with single fall loop. Okay. So we have to know how many rows are there, right? So first of all, we'll find the rows count. So let's name it like rows count equal to, we have to target from the body and we have to find the locators of table rows. And then I can use the account.

Multiple rows will be there. Of course, I can just focus on the first row. Okay. So this is going to return me the number of rows. Okay. So if you want, you can just log and check as well, or else we can also write like expect condition. So here I can say like expect rows count to be four. Okay. So we have like four here. One, two, three, four. Yeah. So we can expect this to be this. Okay. Now, if I used to be this going to like, it will be locals.

That means it is going to check for the number data type and the count is also giving us the numbers, so it should work fine. Okay. But here in this case, like 150, 180, these are your promise of string. So there's going to be string and we know that when the string, we cannot do the arithmetic, it will do the concatenation, not the additional. So we are going to convert the numbers. The string data type to the numbers. Okay. Let's see how to do that as well.

So first of all, here I will go with the loop as I, and the count, we already know that zeros count and it's already giving me something like, of course I miss the await. Okay. Now here, what can I do is I can first find a single row and I can say it like table body from there, the locator of TR dot N. Okay. So we'll just go through the loop. Right. So first row, second row, third row, based on number of counts we have. So from the count, since we have like only two columns, I know that I have to find the last one. Right.

So row dot locator of TD dot last, and from there I have to retrieve the text. So it will give us like text content. And of course we have to use the await and that's going to return me the price. All right. Now what are the price I'm going to get? I have to store it somewhere. So before the loop, I will say like const not const. So we are going to manipulate, of course we should not use the const. And here I can say like total equal to zero. Let's start with the zero and what are the price I'm going to get? So for example, I can say like total plus equals number.

I'm going to use the number of price. Okay. So what is this number in the sense like, we know that this text contents is going to return us string prompts of string. Of course we have used the await, so it will be resolved. Promise will be resolved. And if I say like price directly, it will do the concatenation, but I want to perform the arithmetic. So here, when I say number, that means it will change the string to a number. Okay. So that's very simple. Just a class you're calling it, which will number constructor. Okay. So yeah, that's a very simple thing. Okay. Now we have to do the asset before doing the asset.

Of course I have to get what is the actual value is present. Right? So here I can say like const actual value equal to, so from the T footer, I have to find the locator of PD again, the last one. So that is where our total is there. And I can say the text content. So if I use text content, that means of course I have to use the await. Okay. And then I can use the expect to do the asset. So here actual value to be the total. So total here is number because of course it's a number to derive and actual value is a string.

So of course we have to convert this into a number again. So here I'll say like number. Okay. So that's it. We are pretty much done with the help of one single loop. We are able to solve this. It makes you good. And then probably we'll just discuss one more time. If there is any failure, of course that is case will fail because we have written the asset as well. Okay. And here you can see we got this way. So here you can see the error. Okay, and here you can see we got this way, so here you can expect it for, but received one. Yeah, sorry. This is like we are taking the first one.

So of course it will be like only one row, but yeah, so this is wrong actually. So this asset does it, of course it will not work here because see we are finding the rows and from there we are saying first, first means of course it will return only one, but we are expecting four, which is wrong assertion. So of course we can remove that one. Why I added that? Yeah, actually correct. So if you see here, the rows count should be four only, but I don't know why I have used first here. So yeah, that's wrong actually. Assert is correct, but yeah. Okay. Now let's go and run this one more time. Yeah, it worked now.

So just in case if you want to see the reporter, probably we can get that as well, or else we can go with the console log as well. So here you can select one test fast and I didn't print anything, I guess. Yeah. Since we have already these guys, so I think that's fine, but just in case, if you want to see the log, let me show you that as well. So here I can say like actual, come on, actual value, come on the total. Okay. I just wanted to print and show you so that you will understand better. Okay.

So now if I go to this particular console log here, you can select eight 58, that is our actual, and there's our total. Okay. So yeah, that's it. Pretty cool, pretty neat and clean. This is very easy compared to any other things, I guess. So yeah, that's it. So I hope you understood both the concept. Let me give you a quick recap. So here we found the table from the table. We found the body as well as the footer. Now here we are getting the number of rows. So from the body, I'm finding all the TR and the count. Okay, based on that, we are just doing the loop within the loop.

We are finding the row one by one. So using the Nth function and from the particular row, we are trying to find the particular TD and there are two TDs. So here you can see like we have prices and the items. So from the last, the prices in the last, obviously we are taking the last text content and we are just doing simple mathematical operation here. And then we have this asset and this one, of course, like again within the footer, we have like two. So we are focusing on the last, we are doing the text and we are doing some asset.

Now here we have used the number in both the places because it text content will return as the string, but we want to use the number here. We are using the number because of course we want to form from the mathematic calculation and here we are using the number because we are using the function called to be, which is strict validation. That means it will expect the number to be number format as well as the value to be same. Okay. Yeah. So that's it. I hope you were able to understand that in this and probably in the next video we will also see like how to do the sorting thing as well.

And if time permits, we'll see some other example as well like page generation. That's it from my side. Thanks for watching. If you have any queries, feel free to ask me in the comments or in our discord. Tata boba and take care. .

LetCode with Koushik

Simple web table calculation | Playwright Typescript tutorial - Part 93

Opis wygenerowany przez Skrybot

Transkrypcja wygenerowana przez Skrybot

S K R Y B O T

Skrybot. 2023, Transkrypcje video z YouTube