Add a css selector assert match in MarkupAssertMatchExtension

[VGib]

Is your feature request related to a problem? Please describe.

Hello, i want to check just that some text is in the component output. Thiis avoid me to have an assert which will be coupled with the output html code.

For sample, I need to check that some user have been add to a users li list, by checking only with user name.

AngleSharp provides a css selection method:

target.WaitForAssertion( () => target.Nodes.QuerySelectorAll("li:contains(\"jsqdklqdqs\")").Any(), TimeSpan.FromMilliseconds(30));

Describe the solution you'd like
I'd like to have in MarkupAssertMatchExtension an extension method:

public static void CssMatches(this IRenderedFragment actual, string expectedCss, string? userMessage = null)
		{
			if (actual is null)
				throw new ArgumentNullException(nameof(actual));
			if (expected is null)
				throw new ArgumentNullException(nameof(expected));;
			
                         if(!actual.Nodes.QuerySelectorAll(expectedCss).Any())
                         {
                            throw new HtmlCssException(actual, expectedCss, userMessage); // format like ... not contain ...
                         }
		}

Describe alternatives you've considered
I create the extension my self
Additional context
I can implement it if you like (but I need to install visual studio preview and .NET framework 5 preview) and be ready with bunit naming convention.

[egil]

Hi @VGib,

I like your idea, but I am not entirely sure it should be part of bUnit's *core) web library, so Ill move this over to the discussion pages for now.

A few thoughts though. What you are really testing is not that css matches, but that one or more elements that matches a css selector exists, so perhaps a better name would be HasElements or ContainsElements or ShouldHaveElements?

Ps. you probably already know this, but IRenderedFragment has Find and FindAll methods that uses QuerySelector and QuerySelectorAll under the hood.

[VGib]

I think, this would be nice as documentation for beginer. To my view, this is a bad practice to target exactly the Html Output. This explains why some Automatic framework as Selenium are difficult to maintain (one minor change in a template, can change lot of html in the application, and lot of automatics tests may need to be update).

I think something like, ShouldHaveHtml( cssSearch) would be nice.

[egil]

I agree, thats why I push the semantic HTML comparison in bUnit quite hard, since it will give folks more stable tests: https://bunit.egilhansen.com/docs/verification/verify-markup.html#semantic-comparison-of-markup.

As for the naming, ElementsShouldExist(cssSelector) seems more correct in terms of what the thing is doing. We are not verifying the actual structure of the elements, for that we use MarkupMatches, we are just verifying that the elements exists in the DOM tree. There could be two variants, ElementShouldExist(cssSelector) and ElementsShouldExist(cssSelector, expectedCount).

[VGib]

I agree, does MarkupMatch allows Contains ?

[egil]

What do you mean by Contains?

The MarkupMatches(string expectedMarkup) takes the markup from a rendered fragment, a node or a string, and performs a semantic comparison with the provided expected markup. You can read more about it here: https://bunit.egilhansen.com/docs/verification/verify-markup.html#semantic-comparison-of-markup

Here you can see how you can customizing the semantic comparison: https://bunit.egilhansen.com/docs/verification/semantic-html-comparison.html

[VGib]

If read correctly the documentation, there is a match only for nodes.

But if I want to check the presence of a text. For sample, if I write an error component with a long error message and an error code. I want to check that the right error is displayed, so I won't check the message which may change, I'll check the error code.

  ... lot of tags div .... <p> ..................... ERROR_CODE .......... <p> ... lot of tags, divs .... 

I just want to check the ERROR_CODE, and maybe not beeing forced by the html overhead syntax.

So We need to compare like this 👍

MarkupMatches("<....>....<p diff-regex>.*?ERROR_CODE.*</p> .... tags ... ")

That's what I have understood of MarkupMatches, it compares with AngleSharp, the expected and the razor component output. But, parent tags of p tag can't be ignored.

I think this is because AngleSharp attempt to have 2 very close nodes obtain by search. Here, I'd like to search into unknown and changing context.

This seems me complicated for complex component.

But I may be wrong (one good thing could be to compare after refresh on snapshot, maybe this is what you wanted to do, still it seems me quite complicated).

[egil]

MarkupMatches also works with just strings, where it ignores insignificant whitespace. Just do cut.Find("p").TextContent.MarkupMatches(".*?ERROR_CODE.*");. That should work as well.