If you've ever wondered how to use > or >> in your Playwright Locators look no further.
This question was recently asked in the Playwright Slack
hi everyone, is there any explanation or article about how should/could I use ">", ">>" and " " separators in locators? Eg. what is the difference between this
page.locator('#foo1 >> foo2 >> foo3')vs
page.locator('#foo1 > foo2 > foo3')vs
page.locator('#foo1 foo2 foo3')Looks like the same effect on my side. (edited)
> syntax can be found when using a CCS Selector as a playwright selector.
> expresses a father > child relationship, as a css selector.
>> allows you to chain different Playwright selectors. Chaining Selectors. This is specific to Playwright.
p > span >> text=foo , the
>> part combines two different selectors (a css one and a text engine selector), while the first is just css. If this was a selector in Playwright you would be locating a span within a paragraph element, then finding an element within the span with the text of foo.