Case Inensitive Assertion

[anon35802230]

Hi!
I'm finding different behavior while testing with different browsers. When I execute this code in chrome:

let badge = Selector('div[class=status-badge]');
await t
    .expect(badge.innerText).contains('DRAFT')

The test passes with no problems. But when I execute the same code in Edge, the test fails with:

 1) AssertionError: expected ' Draft ' to include 'DRAFT'

      Browser: Edge 15.15063.0 / Windows 10 0.0.0

The DOM code is this:

<div class="status-badge">
    Draft
</div>

As you can see, the actual value is 'Draft', with only the D capitalized, but I assume that the word is converted to uppercase with CSS.
I would like a way to make the assertion case in-sensitive.
I've naively tried this:
.expect(badge.innerText.toUpperCase()).contains('DRAFT')
But it fails with:
1) TypeError: badge.innerText.toUpperCase is not a function

Is there an easy way to make it case in-sensitive?
What about an or?
Something like
.expect(badge.innerText).contains('DRAFT' || 'Draft') ?

Thank you!

[helen-dikareva]

Hello, @mat0

TestCafe Selector's innerText property value strictly corresponds to DOM el.innertext property value. You can check it in dev tools by the following code:

document.querySelector('.status-badge').innerText.

Please use the match assertion to make checking case insensitive:

await t.expect(badge.innerText).match(/Draft/i);

[anon35802230]

Thanks a lot, @helen-dikareva. As always, very clear and precise answers!

[anon16990817]

I feel that my question is very similar to the above but I'm also using a variable in my test assertion and I don't know how to get that into a regex for .match(). I would prefer to stay away from regex, if possible, simply because I'm not too confident with it and it's one more thing to explain to a junior. I think that .toLowerCase is a bit easier when instructing. However, if there is no good way to solve my following question without regex I will appreciate honest feedback.

---

My question

I have some text on page.
In the HTML it is <span>rock</span>.
But there is CSS text-transform: uppercase; so when I do .innerText on the Selector I get "ROCK".

Perhaps in future the CSS will change and I don't think I should write tests that are able to be broken by CSS text-transform if I'm not testing that. So I'm looking for the most concise way to write a case insensitive assertion.

I thought, "ok, i can deal with this just using something like .toLowerCase() to solve this by standardising the assertion inputs". But I can't find a 1 liner place where .toLowerCase works.

I have managed to do this assertion in 2 lines of code. I was wondering if there's a 1 line way of doing the following (not including the first line which just illustrates the variable that already exists):

  const myExpecting = 'rock' // used in multiple places

  const textOnPage = await mySelector.innerText // resolves to 'ROCK'
  await t.expect(textOnPage.toLowerCase()).contains(myExpecting) // assertion passes ✅

Any of the ways I have tried to combine the last 2 lines I end up with the error: .toLowerCase is not a function. I'm new to testcafé and perhaps I just haven't seen a good example that shows this in the docs yet.

Thanks for reading,

[helen-dikareva]

Hello @mkstix6
You are absolutely right about reliable tests.
TestCafe Selectors have asynchronous properties and methods. That's why you get the .toLowerCase is not a function error when you try to combine these two lines:

const textOnPage = await mySelector.innerText // resolves to 'ROCK'
await t.expect(textOnPage.toLowerCase()).contains(myExpecting) // assertion passes ✅

If you want to write this assertion in one line, you can use RegExp or DOM Node Snapshot if you have more than one assertion for one element.