0

I am trying to find a selector for this date element, it is found as MuiButton-label but the date text is dynamic, I can locate using the xpath in the playwright code but looking for a way to locate it using a css selector. Appreciate your time and help.

enter image description here

with .MuiButton-label class selector it narrows down to 4 elements, however the text cannot be sued to pinpoint to date as it would change I am looking for a way other than regex : enter image description here

mangesh
  • 21
  • 1
  • 8
  • Are the other matches for `.MuiButton-label` other dates below that dropdown or are they elsewhere in the page? – AJG Dec 05 '22 at 09:10
  • @AJG Date, Filter and Add appointments are 3 different button classes if I am getting your question right – mangesh Dec 05 '22 at 11:08
  • it is hard to say really because I can't see what ancestors the other matches for `.MuiButton-label` have. Might be worth a try seeing what playwright codgen comes up with: `npx playwright codgen https://your-url` – AJG Dec 05 '22 at 12:07

2 Answers2

1

Try this selector:

.MuiButton-label span:nth-child(2)

Explanation of selector:

  • .MuiButton-label: An element with class "MuiButton-label"
  • span: Sub elements of previous element with tag "span"
  • :nth-child(2): We will get 2 span, so we get the second one
Jaky Ruby
  • 1,409
  • 1
  • 7
  • 12
  • hi thanks for the help, with .MuiButton-label span:nth-child(2) it could narrow down to 2 elements, extending that logic I could pinpoint the date with: button >> nth = 3 >> span>span:nth-child(2). again thank you very much for the time and help – mangesh Dec 06 '22 at 03:39
0

could locate the element with this selector

button >> nth=3>>span>span:nth-child(2)
mangesh
  • 21
  • 1
  • 8