Selenium c# Antdesign

[Nortier David]

Hello everybody

 

Who works with antDesign ?

 

Their “select” are very specials (some div in div in div in div, not always in the DOM)

 

 

I’m very interested to know if you ‘ve find how to work with antDesign.

I lose many and many times …

 

 

Thank you

 

 

David

 

---

====== DISCLAIMER ======

https://www.cph.be/maildisclaimer

[Ned Thompson]

You haven't provided an example of the DOM, so I just took a look at one of the previews. I imagine the simplest way to do this would be to get all elements within the scope of what you're targeting, and then select them either by some attribute, or the text, without using SelectElement, similar to what you would do to select a row/column in a table. Really, just need to get a list and then use LINQ to select the target element from it. It's very similar to how knockout.js enables the MVVM pattern. Although in that case we have the data-bind attribute to help out a bit.

The path of least resistance, and worst performance would be to select all of the element with something like classname "ant-tag"
You likely don't want to do this, but it's a start. A more performant and explicit option would be to have a developer add an id to the parent element that you can hook onto, like the parent element of the dropdown list (the thing you click on to open the list), and then use CssSelector to drill down to that specific dropdown list, and only those specific dropdown list items.

Let's assume that the parent element of the span "ant-tag-checkable"s is a dropdown menu with an Id of "ParentElement."

IList<IWebElement> ListOfThings => driver.FindElements(By.CssSelector("#ParentElement .ant-tag-checkable"));

Now you can use LINQ or a foreach loop to get the target one you want from the list. If the dropdown list loads dynamically, you might favor LINQ over a foreach loop. If it's all static and loaded in the DOM initially on page load, then a foreach loop should be fine, and give you better performance than a LINQ query.

[Nortier David]

Hello

 

Thanks for response ❤

 

 

1st example :

• I click in the input id=select-appointment-type (cf appointement.png)
  • DOM : appointmentnput.png
• But the options are somewhere else in the DOM, at the bottom, and only visible if/when I click first in the input
  • DOM : appointmentOptions.png

 

The ‘link’ = aria-controls

• the options of select-appointment-type are in select-appointment-type_list

 

• ok to find the options

 

 

2d example :

• I click in the input id=select-civil-status (cf civil-status.png)
  • DOM : select-civil-statusInput.png
• But the options are somewhere else in the DOM, at the bottom, and only visible if/when I click first in the input
  • DOM : select-civil-statusOptions.png

 

The ‘link’ = aria-controls

• the options of select-civil-status are in select-civil-status_list

 

• ok to find the options

 

 

 

But is it always like this ?

 

 

Thank you very much

 

 

David

 

De : seleniu...@googlegroups.com <seleniu...@googlegroups.com> De la part de Ned Thompson
Envoyé : dimanche 6 février 2022 01:26
À : Selenium Users <seleniu...@googlegroups.com>
Objet : [selenium-users] Re: Selenium c# Antdesign

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/32bd22f2-8768-466e-b564-ac3b2ce0e63fn%40googlegroups.com.

[Ned Thompson]

It should be fine that the options are in another section of the DOM. It seems like in your project it may always be like this (I feel you, currently working in a project that is like 90% divs, with either non-unique or dynamic IDs all over the place D:).

You might be able to create a helper method for those, if you're confident that all dropdown list items have the class "ant-select-item-option"

public void SelectFromAntDropdownList(IWebElement dropdownControl, string parentListId, string titleString)
{
     //Click to open the dropdown list
     dropdownControl.Click();

    

     //Find all items within scope of the parent element

     IList<IWebElement> selectableOptions = driver.FindElements(By.CssSelector($"{parentListId} .ant-select-item-option");

     //Click the target item
     selectableOptions.First(element => element.GetAttribute("title") == titleString).Click();
}

The method seems a little wonky to me and might take some getting used to, but hopefully it will work and you only have to write it every so often.

[Ned Thompson]

Edit: Forgot the '#' before parentListId, you probably don't want to have to remember to pass that.

IList<IWebElement> selectableOptions = driver.FindElements(By.CssSelector($"#{parentListId} .ant-select-item-option");

[Nortier David]

Hey

 

Thanks a lot

 

I do more or less that.

 

I don’t use CssSelector (but Xpath with @class), almost never anyway, I don’t know why (because I don’t know well 😊)

And I don’t use title but text attribut.

 

It seems the options of a IwebElement with id “XXX” are in a div with id “XXX_list”

 

 

 

De : seleniu...@googlegroups.com <seleniu...@googlegroups.com> De la part de Ned Thompson
Envoyé : mercredi 9 février 2022 04:50
À : Selenium Users <seleniu...@googlegroups.com>
Objet : Re: [selenium-users] Re: Selenium c# Antdesign

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/82807497-c633-4650-b11a-6cae464c0326n%40googlegroups.com.