What's the Difference Between ">", ">>" and " " Separators in Locators When Using Playwright?

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)

The > syntax can be found when using a CCS Selector as a playwright selector.

The single> expresses a father > child relationship, as a css selector.

The double >> 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.