Selecting Size in an e-commerce webite

Hello Team,

I have a question about how I can let the script select the 1st available size on an e-commerce website page rather than hard-coding what size to select every time. Our e-commerce website has normally XS , S , M , L ,XL ,XXL . sizes displayed. If a size is not in stock then it is not clickable else clickable.

I want that script should see if XS is clickable?If Yes Click it. Else Check S clickable? If Yes Click it. Else Check If M clickable? If Yes Click it and so on.

I don’t want to click multiple sizes, the script only needs to decide itself which size to click and then click add to cart.

I think we can use an If statement but my skill level with programming doesn’t allow me. Currently, I am hard coding which Size to select but that approach doesn’t work on Production where I can increase or decrease the Quantity of a given size available in stock through the backend.

The “select the 1st available size” requirement in the context of the DOM is the same as saying “click on the 1st element that represents a size”. So all you need to do is configure a Test Object with a locator that finds the first element for the size “widget”. Without seeing the HTML for your page, I’m going to assume that the widget is a radio group, which is a widget that generally means you can select one option, and only one option, out of a group of options. So your Test Object would look something like:

Then your test code would simply be something like:'path/to/my/object'), 30);

But again, this is just to point you to an approach. What we would really need to solve this definitively would be a screenshot of the HTML elements for the “size” selection on your page.

Hello @Brandon_Hein

Sorry I may have explained my question wrongly. Here is the screenshot of the element in a very happy scenario i.e all Sizes are available.


But in actual, this is very rare and we may see something like this



If my hardcoded script says that the size to be selected is XL then the script will fail saying the element is not clickable.

By the 1st available size I meant that the script should select the any available size which it will see first.

No worries, I understood what you were trying to do. As I said the solution I gave was just a guess in the absence of actually seeing the DOM. We really need to see the HTML for those “buttons” in order to provide a concrete solution.

like @Brandon_Hein said, without seeing the HTml it is difficult. However my approach would be

  1. Find an xpath that will identify all the sizes
  2. there will be an attribute(css value) which is making the button not clickable
  3. write and xpath with combination of #1 and #2. So that you get xpath to select all elements that are active. You can use doesnot contain in xpath
  4. lastly user index to click the first available clickable button