How to Verify the Disabled Attribute (HTML)

PROBLEM

Many website developers will setup buttons or other elements within the site to be "disabled" until a certain action occurs. When using Test Studio to test this, it is sometimes necessary to create a special verification that confirms that the button (in this example) is visible but disabled (not clickable/usable). You can similarly verify that the disabled attribute no longer exists, indicating the button is clickable/usable.

 

For example, when you have a disabled or not disabled element on a page that needs to be verified/waited for, or you have another attribute within the markup of an element you wish to search for (you can modify this process for your own needs).

 

The top button in this image is disabled

SOLUTION 1 (No Code)

  1. Launch a recorder window.
  2. Navigate to the page/step with the disabled element you'd like to verify.
  3. Using the below image:

     

    Click to enlarge

     

    1. Enable hover over highlighting.
    2. Hover the mouse over the applicable element
    3. Click the blue nub.
    4. Choose Build Verification.
    5. Click Content.
    6. Set the first drop-down menu to read OuterMarkup.
      1. To verify the disabled attributed, set the second drop-down menu to Contains.
      2. To verify the element is not disabled, set the second drop-down menu to NotContain.
    7. Set the third drop-down menu to read disabled.

      Note: You can alter the above verification string to craft it to your needs. Be aware that different browsers will check this data differently, and ensure your verification will work in multiple browsers. You may need to create separate versions of this rule for each browser.

  4. Click OK.
  5. A new Verify rule will be created within the Test at the location you specified. You can right click this step to Change Role and Set as Wait, if desired.

SOLUTION 2 (Using Code, also apples to Telerik Testing Framework)

There are several ways to indicate a disabled element in HTML. This solution will work for each type of disabled. First, access the element from a Coded Step. 

 

There are two ways to do that:

  1. Write the Find Logic yourself in code. Use this approach if you are using Telerik Testing Framework only. You can insert this logic in the same coded step that does the disabled verification.
  2.  

    Element e = Find.ByExpression("id=myInput");

     

  3. Add the element to your Project Elements, then reference it from that source. Use this approach if you are using Test Studio Standalone version or the Visual Studio plugin.
  4.  

    HtmlInputText e = Pages.TryitEditorV14.FrameView.LnameText;

     

  5. Once you have your Element e, here is the verification in code:
  6.  

    Assert.IsTrue(e.Contains("disabled"));

     

  7. This code will fail the Coded step if the element isn't set to disabled.
  8.