This project is read-only.

Searching Web Pages For Multiple CSS Classes

Aug 22, 2013 at 8:52 PM
Edited Aug 22, 2013 at 8:59 PM
I am doing some testing of CUITe, and our web application makes heavy use of multiple CSS classes on objects. CSS classes are often added and removed using jQuery actions (so I can't depend on the order of the classses).

For CSS classes, the available search parameters do not seem to work very well when objects have multiple CSS classes.

If I have HTML like this:
 <span class="biller-icon billicon-50 Bill" data-id="50"></span>
Using code below seems to fail, as CUITe appears to do an exact string match
public CUITe_HtmlSpan span_Biller50_BillButton = new CUITe_HtmlSpan("Class=billicon-50");

So I can use the code below, which kind of works, but it would also match something that has a CSS class = "billicon-50 billtest-dontuse" as well as just a CSS class of = "billicon-50"
public CUITe_HtmlSpan span_Biller50_BillButton = new CUITe_HtmlSpan("Class~billicon-50;Class~Bill");

Is there a better way to specify I want this element to have BOTH CSS class A and CSS class B (in any order) ?

Ideally you would want to do an entire WORD match of the search parameter against the space-separated Class values in the DOM.

Thanks.
Aug 24, 2013 at 8:39 PM
Hi CaptainScavo,

I was not able to reproduce your issue.

The following coded ui test passes:
        [TestMethod]
        public void Get_UsingMultipleValuesOfClassAttributeWithContainsOperatorOfHtmlSpan_ReturnsTheSpecificElementWithAllSpecifiedClassValues()
        {
            // Arrange
            using (TempFile tempFile = new TempFile(
@"<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <span name=""span1"" class=""class1"" />
        <span name=""span2"" class=""class1 class4"" />
        <span name=""span3"" class=""class1 class2 class3"" />
    </body>
</html>"))
            {
                CUITe_BrowserWindow.Launch(tempFile.FilePath);
                CUITe_BrowserWindow window = new CUITe_BrowserWindow("test");

                CUITe_HtmlSpan span3 = window.Get<CUITe_HtmlSpan>("Class~class1;Class~class2");

                // Act and Assert
                Assert.AreEqual("span3", span3.UnWrap().Name);

                window.Close();
            }
        }
Oct 3, 2013 at 11:28 AM
Hi CaptainScavo,

Can you try to use TagInstance property of the particular Span, since CSS class will be used multiple places in html file.
TagInstance is like "index" property of object.

eg:
CUITe_HtmlSpan span3 = window.Get<CUITe_HtmlSpan>("TagInstance","1");


Thanks
Neeraj