Transcripted Summary
Let's talk about the Content match level.
MatchLevel.Content
The Content match level is basically the same exact thing as a Strict match level; however, it ignores colors. This is useful for whenever you might have a website that includes many different colors and the colors aren't relevant to your website, then you can use the content level.
Let me show you here.
So, as you can see the differences are turned off. But if I do turn on the differences using the “D” key, you can now see that it's highlighted this difference which is there, but it didn't highlight this yellow.
Let me place the images side by side. See that?
You can see that this used to be white and now I changed it to yellow. It didn't highlight those differences. So, see that?
That is the Content match level — ignoring the colors. So, if the colors aren't relevant you can use it.
Let's take a look at the code.
What I've done here is I created a brand-new class called MatchLevels and I tagged it with category match levels that inherits from our standard BaseClass.
And there I have our Setup and TearDown methods which create Applitools and destroy Applitools in all the relevant browsers just like before.
And then here I have a test method called ContentMatchLevel.
You can see that the very first thing I do is I say Eyes.MatchLevel — this is a property that allows me to set the Applitools Eyes Match Level.
And so, in this case there's an enum that I use that allows me to specify Content.
There are multiple different enums that are available. So, watch, if I click here, you can see Content, Layout. Here's layout legacy and not really used anymore, None, and Strict.
So those are all the options that you have available from the match level.
Then the next method goes to a pricing page, just like before.
If I peek this definition, you can see that go to pricing page. You've already seen this method before. All it does is go to the fake pricing page.
Now this method is new, and I made it specifically for the different match levels — ChangetoEuroAndUpdateColor.
If we scroll down and see what this method does, it says that it's called a change to euro and update color.
So, as you can see here, the JavaScript class, which I've actually moved into the BaseClass, we can peek this definition as well.
You can see that the JavaScript I'm now storing in the BaseClass because before I was creating it in every single method and I removed that duplication. So, in my BaseClass I've got the JavaScript class and then I'm actually instantiating the JavaScript class inside of my setup method, which you can see a right here.
Whenever I need a JavaScript execution class, I instantiate it right there.
So, using that class, I execute a script, which you've seen before.
Here I locate an element by class name using this class name and it's the 1st element in the collection and I update its inner text to be the euro with the zero. And so, you've already seen that change before. What's different here is I use this JavaScript to set the style of the element to this yellow color.
How I found this yellow color, I just googled different colors and so then I just inserted it in here. And based on that I was able to update the color of the element to yellow instead of the white that was before. So, using all of that, I updated the colors.
Then we do the standard as all before.
We're opening Applitools with the driver passing in the same AppName as before, which if we peek the definition you can see it's “sample app 1”.
The TestCaseName is “Test`” and the resolution is 10 ADP, our standard baseline.
And then we do a Eyes.CheckWindow().
Now the CheckWindow() method actually has two overloads — you can pass in nothing or you can pass in something.
And you can pass in what is known as a “Tag”. So here I'm just tagging my test, kind of giving it more information and I'm saying that this test is “MatchLevel.Content”.
You can put anything you want here to describe your test case. I'm putting in MatchLevel.Content so that it's easier for me to see when I'm actually looking at the Applitools.
Let me show you where that comes up.
If I come here, you can see that “MatchLevel.Content” appears right here. So, I know that this is our checkpoint that I had with this specific tag. That's how I know that this is different from the other test cases that I may have ran.
All right, so that's pretty much it for the Content level. Let's proceed.
Resources
Quiz
The quiz for this chapter can be found in section 7.4.
