Selenium - how to manage a SfDropDownList with Selenium?

[Aleksandar]

Dear Syncfusion team,

thank you for this great component.

I am doing Selenium testing and I'm interested how to manage SfDropDownList with Selenium.

I have created an empty Blazor project with SfDropDownList and test project with Selenium and XUnit so you can easier run this and provide some examples.

To run Selenium:

1.  start server at http://localhost:5000
   
• open VS -> select SyncfusionSelenium instead of IIS Server as a Launch option and hit Ctrl+F5
  
• or open project folder -> open console a enter "dotnet watch run debug"
2. Open Tests Explorer and run/debug "Test1"

I would really appreciate your help here as I couldn't find examples how to do this for SfDropDownList .

Looking forward to your answer!
Alex

Attachment: SYncfusionSelenium_b2ea0a0e.zip

[Berly Christopher]

Hi Aleksandar, 

  

We will check the requested requirement and update the further details in two business days (11^th August 2021).  

  

Please find the information about testing library from the below common blogs. 

  

https://www.syncfusion.com/blogs/post/bunit-for-blazor-and-how-to-integrate-it-in-azure-pipeline.aspx 

  

https://www.syncfusion.com/faq/blazor/testing/how-do-i-unit-test-a-blazor-component 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Aleksandar, 

  

Thanks for the patience. 

  

We can write the test case for the DropDownList component with Xunit by accessing the element and attribute of the component as mentioned below. 

  

        [Fact] 

        public void Test1() 

        { 

            _driver.Navigate().GoToUrl("http://localhost:5000"); 

 

            _driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10); 

 

            var title = _driver.FindElement(By.Id("Title")); 

            Assert.Equal("Hello, world!", title.Text); 

        } 

 

        [Fact] 

        public void DefaultInitialize() 

        { 

             

            _driver.Navigate().GoToUrl("http://localhost:5000"); 

            _driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10); 

            var inputEle = _driver.FindElement(By.ClassName("e-ddl")); 

            Assert.Equal("0", inputEle.GetAttribute("tabindex")); 

        } 

        [Fact] 

        public void Enabled() 

        { 

            _driver.Navigate().GoToUrl("http://localhost:5000"); 

            _driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10); 

            var inputEle = _driver.FindElement(By.TagName("input")); 

            Assert.Equal("false", inputEle.GetAttribute("aria-disabled")); 

        } 

        [Fact] 

        public void Placeholder() 

        { 

            _driver.Navigate().GoToUrl("http://localhost:5000"); 

            _driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10); 

            var inputEle = _driver.FindElement(By.TagName("input")); 

            Assert.Equal("Select a game", inputEle.GetAttribute("aria-placeholder")); 

        } 

 

 

  

For your convenience, we have attached the modified sample below. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SYncfusionSelenium-914502900  

  

Regards, 

Berly B.C 

[Aleksandar]

Dear Syncfusion team,

thank you for your response.

Could you please show how to change a value of a dropdown with Selenium? Can we somehow access it by ID and set another value from a dropdown list?

I want to select another Item from a dropdown and verify that it has been successfully changed.

<SfDropDownList ID="MyDropdown" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings></SfDropDownList>

Best wishes,

Alex

[Berly Christopher]

Hi Aleksandar, 

  

You can achieve the requested requirement with help of bUnit test case in the Blazor as mentioned in the below code example. 

  

https://blazor.syncfusion.com/documentation/common/how-to/configure-blazor-component-in-bunit-testing  

  

https://www.syncfusion.com/blogs/post/bunit-for-blazor-and-how-to-integrate-it-in-azure-pipeline.aspx  

  

using System;  

using System.Collections.Generic;  

using System.Text;  

using Xunit;  

using Bunit;  

using Syncfusion.Blazor;  

using Syncfusion.Blazor.DropDowns;  

using Syncfusion.Blazor.Tests.Base;  

using static Bunit.ComponentParameterFactory;  

using Syncfusion.Blazor.Calendars;  

using System.Threading.Tasks;  

using AngleSharp.Css.Dom;  

using Syncfusion.Blazor.Inputs;  

using Microsoft.AspNetCore.Components.Web;  

using Microsoft.AspNetCore.Components;  

using System.Globalization;  

 

private List<Countries> GetDataItems() 

{ 

    return new List<Countries> 

    { 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

        new Countries() { Name = "Denmark", Code = "DK" }, 

        new Countries() { Name = "France", Code = "FR" } 

    }; 

} 

 

[Fact(DisplayName = "Value at dynamic changes")] 

public async Task DynamicValueBinding() 

{ 

    var data = GetDataItems(); 

    var dropdown = RenderComponent<SfDropDownList<string, Countries>>(parameters => 

            parameters.Add(p => p.DataSource, data).AddChildContent<DropDownListFieldSettings>(field => field.Add(p => p.Text, "Name").Add(p => p.Value, "Code"))); 

    dropdown.SetParametersAndRender(("Value", "AU")); 

    await Task.Delay(200); 

    var inputEle = dropdown.Find("input"); 

    Assert.Equal(dropdown.Instance.Text, inputEle.GetAttribute("value")); 

    Assert.Equal(0, dropdown.Instance.Index); 

    dropdown.SetParametersAndRender(("Value", null)); 

    Assert.Equal(dropdown.Instance.Text, inputEle.GetAttribute("value")); 

    Assert.Null(dropdown.Instance.Value); 

    Assert.Null(dropdown.Instance.Index); 

    dropdown.SetParametersAndRender(("Index", 3)); 

    await Task.Delay(200); 

    inputEle = dropdown.Find("input"); 

    Assert.Equal("CM", dropdown.Instance.Value); 

    Assert.Equal(3, dropdown.Instance.Index); 

    dropdown.SetParametersAndRender(("Index", null)); 

    Assert.Null(dropdown.Instance.Value); 

    Assert.Null(dropdown.Instance.Index); 

} 

 

  

Regards, 

Berly B.C 

[Aleksandar]

Thank you, but bUnit is not what I need. I want to set/change a value with Selenium, Do you know how do I achieve this with Selenium? 

I think an answer to this should be beneficial for other developers as well. 

Looking forward to your answer. 

Alex

[Berly Christopher]

Hi Aleksandar, 

  

We will check the possibilities for achieve the requested requirement and update the further details in two business days (20^th August 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Aleksandar, 

  

We have raised the query in the stack overflow link for getting possible solution for the requested requirement. We will update the details once the solution we got from the link. 

  

Stackoverflow Link: https://stackoverflow.com/questions/68862025/how-to-access-the-component-instance-in-the-blazor-xunit-test-case  

  

Regards, 

Berly B.C 

[Aleksandar]

This is how I managed to set/change a value of a dropdown:

Thread.Sleep(TimeSpan.FromMilliseconds(250));
_driver.FindElement(By.Id("MyDropdown")).SendKeys("Basketball");


Thread.Sleep(TimeSpan.FromMilliseconds(250));
_driver.FindElement(By.Id("MyDropdown")).SendKeys("Basketball");

 I access a SfDropDownList by ID and set 'Text' from my class "Games". I have to do this 2 times to ensure it is properly set. This is the best I came up with so far.

<SfDropDownList ID="MyDropdown" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>


@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
  };
}

[Deepak Ramakrishnan]

Hi Aleksandar, 

 

We deeply regret for the inconvenience caused  . 

 

Based upon our case-study we couldn’t find any solution related to your query regarding xUnit , So we request  you to use the bUnit testing instead of xUnit as suggested in previous update. 

 

Thanks, 

Deepak R. 

[Allen Cook]

I have found a way to use selenium to select items via clicking

driver.findElement(By.xpath("//label[contains(text(),'floatLabel')]/preceding-sibling::input")).click();
WebElement popup = driver.findElement(By.id(queueFilter.getAttribute("id") + "_popup"));
popup.findElement(By.cssSelector("li[data-value='" + value + "']")).click();

The main part is using the id of the dropdown to find the generated popup in the DOM to select the value

[Ponmani Murugaiyan]

Hi Allen, 

Thanks for the update. Please get back us if you need further assistance. 

Regards, 

Ponmani M