Custom web controls

6 posts, 1 answers
  1. Wit
    Wit avatar
    24 posts
    Member since:
    Jul 2010

    Posted 25 Aug 2010 Link to this post

    I would like to extend the standard html controls or build completely new, composite controls placed in separate class.
    Then, I would like to use them in my test code like:

    CustomWebControl myControl = new CustomWebControl();
    myControl.TextBox.TypeText("sample");
    myControl.Button.Click();

    CustomControls should ideally initialize itself from ActiveBrowser bye something like:

    TextBox = base.Find.ById("textbox1");


    How to do it?
  2. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 25 Aug 2010 Link to this post

    Hi Wit,

    We have such an example published as CodeLibrary project but it covers the Silverlight custom controls. You can use it as reference and find it here.

    Note in HTML your custom wrapper should extend any of the base HTML controls available at ArtOfTest.WebAii.Controls.HtmlControls namespace. The basic one all the controls extend is HtmlControl but you can use any other to benefit from its implementation (such as HtmlContainerControl for containers for example).

    You may also need:
    1. Two constructors -- the first to be empty (extending base()) and the second to pass in element (type Element) to the base class.
    2. Initialize a locator expression in the constructor that should be returned by overriding the LocatorExpression property. You can review the FindExpression topic for additional info.
    3. Override the AssignElement method for any sub elements initialization.

    Please let us know if you have further questions.

    Kind regards,
    Konstantin Petkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Wit
    Wit avatar
    24 posts
    Member since:
    Jul 2010

    Posted 25 Aug 2010 Link to this post

    I am sorry. I think I won't understand that without example.
    Here's what I got:

    namespace CustomControls
    {
        public class CustomHtmlInputText : HtmlInputText
        {
             
            public override void Click()   
            {      
                // doesn't compile
                Desktop.Mouse.Click(MouseClickType.LeftClick, this.GetRectangle());        
            }
        }
             
        public class SearchPanel : HtmlControl
        {
     
            public CustomHtmlInputText DeparturePlace
            {
                get
                {
                    return base.Find.ById<CustomHtmlInputText>("sc_fromPlace");
                }
            }
                     
            public HtmlButton Search
            {
                get
                {
                    return base.Find.ById<HtmlButton>("sc_search");
                }
            }
     
            public SearchPanel ()
            {
             
            }                  
        }
    }


    And test:

    [Test]
           public void Test1()
           {
                
               Manager.LaunchNewBrowser();
               ActiveBrowser.NavigateTo("http://www.skyscanner.net");
                
               SearchPanel sp= Find.ById<SearchPanel>("searchcontrols");
               sp.DeparturePlace.Click();                 
               sp.Search.Click();         
                
           }

    How to make it working so that i have my own methods in custom controls.
  4. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 25 Aug 2010 Link to this post

    Hello Wit,

    Add the constructors and an AssignElement() override. The latter may just need to call the base.AssignElement() but in future you can initialize something there.

    /// <summary>
    /// Create a new control.
    /// </summary>
    /// <param name="element">The base element.</param>
    public HtmlButton(Element element)
        : base(element)
    {
         
    }
     
    /// <summary>
    /// Create a new control.
    /// </summary>
    public HtmlButton() : base()
    {
    }

    /// <summary>
    /// Assign element and initialize this control.
    /// </summary>
    /// <param name="e">The base element.</param>
    public override void AssignElement(Element e)
    {
        base.AssignElement(e);
    }

    To be able to use the custom wrapper you've created just add a reference to the project in the test one. Does that help?

    Greetings,
    Konstantin Petkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Wit
    Wit avatar
    24 posts
    Member since:
    Jul 2010

    Posted 25 Aug 2010 Link to this post

    I don't understand half of the things you write about :-(.

    Below is updated code of custom controls. I still don't know how to implement my own custom actions e.g. Click() method of CustomHtmlInputText class

    namespace CustomControls
    {
        public class CustomHtmlInputText : HtmlInputText
        {
            public CustomHtmlInputText(Element element) : base(element)
            {
                 
            }
            public CustomHtmlInputText():base()
            {
                 
            }
             
            public override void AssignElement(Element e)
            {
                base.AssignElement(e);
            }
                 
            public override void Click()   
            {      
                // doesn't compile
                //Desktop.Mouse.Click(MouseClickType.LeftClick, this.GetRectangle());      
                base.Click();
            }
        }
             
        public class SearchPanel : HtmlControl
        {
     
            public CustomHtmlInputText DeparturePlace
            {
                get
                {
                    return base.Find.ById<CustomHtmlInputText>("sc_fromPlace");
                }
            }
                     
            public HtmlButton Search
            {
                get
                {
                    return base.Find.ById<HtmlButton>("sc_search");
                }
            }
     
            public SearchPanel ()
            {
             
            }                  
        }
    }
  6. Answer
    Nikolai
    Admin
    Nikolai avatar
    112 posts

    Posted 26 Aug 2010 Link to this post

    Hello Wit,

     
    Desktop class in not static you need can access it via the Manager instance like this:

    public override void Click()
    {
            this.OwnerBrowser.Manager.Desktop.Mouse.Click(MouseClickType.LeftClick, this.GetRectangle());           
    }

    Sincerely yours,
    Nikolai
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top