Extracting Page Values | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to extract text values from a web page using Cypress. This is useful for saving values for later use or extracting values from input fields and HTML attributes. Key Examples Covered Example 1: Extracting Label Text Use sci.get to locate the email label. Utilize the then function to get the element instance. Call text method to extract the label value. Print the value to the console using console.log . Example 2: Using Invoke Command Use invoke with the text method to directly get the label value. Print the extracted value to the console. Example 3: Invoking Attribute Values Use invoke with attr to get HTML attributes like class or placeholder . Print the attribute values to the console. Example 4: Invoking Input Field Value Type a value into an input field and use invoke with prop to get the value property. Print the input value to the console. Important Notes If you only need to validate a value, use Cypress assertions directly without invoking the text first. Assertions can be made using methods like shouldContain or have.attribute . This lesson demonstrates how to effectively extract and validate text and attribute values using Cypress, enhancing your testing capabilities.
Video Transcript
Hey guys, in this lesson, we will talk about how to extract different texts from the web page. So sometimes in your test scenario, you need to extract and save different text values from the page to use them later for something else, or maybe extract value from the input field or even from HTML attributes. So in this lesson, we will cover all those scenarios. Let's get into it. So this is our forms layout page, and let's play around with this, let's say, label email address. So let's grab this value and then print out to the console, how we do this in Cypress. So going back to the code and I've started a new test. So example number one, how would you do that using a jQuery method. I type sci.get, and first of all, we need to find a locator for this value. So email address, inspect, and let me do it one more time, inspect. And I think we can take this attribute for example, input email one. This sounds like a unique attribute, and we have also ID for the input field, but we are looking into the label. So let me grab this guy, copying it, and pasting here as the attribute. So the example number one is you use then function. This will return you the instance of this web element, and then label will be a name that we provide. And then inside, a little mistyping, and then inside you call label and call method text like this. So method text is a jQuery method. Look, if I hover over it, it's showing the jQuery. And this method can extract the value from this web element. Now let's say assign this to the constant, const label equals two. And let's print this out to the console, console.log. And I'm printing it over here, and yeah, I guess let's execute. So here's the Cypress, I'm running the test. And we have a webpack compilation error because the label already declared. Okay, I cannot use the same name. Let me call it, okay, email. Let me call it like this, email label. Email label, email label, like this. Is it gonna work? Yeah, it works. And look, the value to the console is not printed right here in the Cypress call command. We need to literally go to the browser console. So right-click Inspect, and I switch in here to the console tab as a browser. And here we go, we have email address printed into the console. So if I refresh, and here we go, you see email is printed. So that's example number one. The example number two, using invoke command. So I will use exactly the same locator, like this. But instead, I will use method in Cypress called invoke. So what this method does, this method can run or invoke different jQuery functions. So text is technically jQuery function. So here I type as the argument the name for the jQuery function, which is a text. And that's it, this method then returns us the actual value. And we can process it the same way. For example, then email label like this. And then we can print it right away to the console, console.log. And then I print the text right away. We don't need to instruct it because it's already extracted for us. So going back, let me clear this up, refresh. And now we have two email address printed. One for the first example and one for the second example. And also I want to remind you that you can use Cypress alias if you want to save this value right away. So invoke text and then I call as create the alias. I can create it under this name and that's it. The value that was invoked from this web element will be saved to this Cypress alias and I can call the Cypress alias anywhere in my code. So moving to the next example. Example number three is invoke attribute value. And for that, let's look at different example. Instead of this label, let's take this input field, this ID, because it has a bunch of attributes. We will play around with it. So I'm grabbing this ID for the input field. So I get the ID we search by the hash sign. And then to invoke, let's say, class attribute, because remember class is the attribute. We have this long, long value for the class. I also call method invoke like this. And for this, I will call method attr, A-T-T-R, attribute. And then put comma and the second argument, the name of the attribute that I want to invoke. Let's say I want to invoke attribute class and I type class like this. And that's it, the value will be invoked for me. So now I just type then and let's call it class value. And let's print this out to the console as well. Ctrl-C, Ctrl-V, class value, class value, and going back to the Cypress. And here we go, the value of the class was printed successfully. And you can do this with any attribute. So for example, if I take, let's say, placeholder. So I grab the placeholder value and I put it right here instead of the class. And going back to the console, and look, the value of the placeholder attribute was printed. So that's how easy it is. So changing back to the class like this. And the last example, example number four, if you want to invoke input field value. So let's use the same exact example like this. And before we can get the value from the input field, so we will use the same input field email address. We need to type something into this input field. So let's type something and let's put hello at test.com, something like this. And after that, we will need to call this guy. Use method invoke one more time. But in this example, we will need to use a different method called prop, which represent a property. And the property we are looking for has a name value like this. You may be asking, how do I know that this is a property and this is a value? Let me show you. So going back to the browser, and then let's say I type here hello at test.com, hit Enter, and this value is saved. Now, in the browser, somewhere here, I go to the right tab. And I'm looking for this top properties. I click on the properties for this element. And here are all the different properties for this input field. We're scrolling all the way down, all the way down, all the way down until we find the property value. Here we go, and look, this is our text. So property value is this is where the text sitting for pretty much all input fields. It can be any type of input fields. It can be read-only input fields, or it can be like this input field like we did right now, which we can edit. So this is how I know that the property. If you want to invoke any other property from this element, for example, tag name, or tab index, or whatever property, you can use invoke method as well. But I doubt that you will need anything else than value. So just for your information, moving on, and let's try to print it. So then value. And we want to console.log this guy, and then print the value. And let's go back. So Cypress, let me clear this out, refresh the test, and here we go. Two email addresses, class, and hello at test.com was printed successfully. And I want to point one more thing. So if all you need for your test is just to make an assertion, you don't need to invoke the text before making the assertion. Because Cypress methods already have everything built in into the assertion to make a validation. So this type of stuff you need only when you need to get the value, process it somehow, maybe concatenate with some other value, or add to some other project, or add to some other object, something like this. And then do something inside of your script. If all you need is just to make a validation, just use assertion right away. For example, here, if I want to make the validation of this property, which is email label, I can just call shouldContain and the value that I expect, shouldContain and the value of the property is, what is that? Email address, right? Value of the property is email address. And we go in back, refresh, let me make it bigger. And look, the assertion passed successfully. We made a validation of email address. The same is related to other properties. Let's say, if we want to validate right away the class value. You don't need to call invoke with this kind of attribute class and put then, then save it. There is a shorter way. So you just call the locator like this. Then you call should, and then have attribute, have attribute, comma, then class, class, and then comma, and then the value that we expect. That's gonna be a long value. Let me copy it from here. Copying from here and putting it right here. Yeah, it's pretty long, but you got the idea. So going back to the test, and you see this assertion also passed successfully. We validated the class value. So that's pretty much it, and let's quickly summarize what we did in this lesson. So if you want to extract any visible text from the page, you can call a text jQuery method from then, and then process with this text however you want. Alternatively, you can call a Cypress method invoke and call the same jQuery method text that will return you the already text value. And then you can process this value however you want, either using then and then processing it inside of this function, or you can assign it to Cypress alias and processes is later. If you need to invoke any HTML attribute, you call invoke, attribute, and the attribute name. If you want to invoke the value of the input field, you call property and invoke the value. If you need just to make a validation for any of those values, you can call Cypress assertions directly, like shouldContainValue or attributeClass or shouldHaveValue and make a validation that way. All right, that's it guys, and see you in the next lesson.