Playwright Python - Tab Link Not Visible

Question

I am trying to hover the Mouse Pointer over the Tab Link "Markets". But inside Playwright it states the element is not visible. I have tried to use page.wait_for_selector, but i get the same type of response. I have tried multiple ways in using the Xpath and CSS Selector, but none of them are working. Below is the Python Code, the ways i have written the Xpaths, and CSS Selectors, and than finally the HTML Code.

markets_tab = page.query_selector('//*[@id="sections-scroll-target"]/ul/ul/li[8]/a')
    
page.wait_for_selector(markets_tab, timeout=10000)

page.hover(markets_tab)

page.wait_for_timeout(10000)

Below are the Different ways i have written and used the Xpath and CSS Selector. I get the same results with all of them. The first two Xpaths are from right clicking and selecting Xpath, and the Xpath to website link is what i adjusted and wrote. Also CSS Selector below is also from right clicking and copying.

# Xpath
'//*[@id="sections-scroll-target"]/ul/ul/li[8]/a'

# Full Xpath
'//html/body/div[1]/div/div/div/div[1]/header/div[3]/div/div[2]/div/div/div/ul/ul/li[8]/a' 

# Xpath to tab website link 
'//*[@href= "https://www.testdummysite.com/news/markets?mod=nav_left_section" ]'

# CSS Selector
'#sections-scroll-target > ul > ul > li:nth-child(8) > a'

Below is the HTML Code that is obtained from "right click" - "inspect". The Tab Link "Markets" is under a List Item Element Tag (li). There are a total of 18 Menu Tab Links, the "Markets" tab link is in the 8th order of List Item Element tag. Below is the HTM Code of the List Item Element Tags, the opened List Item Element tag with the "a-tag" is the one containing the "Markets" Tab Link,

<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Home</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Jogging</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Tennis</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Soccer</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Basketball</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Sports</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Tech</a></li>
<li class="style--subsection-item--ICtfMGEX "><a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/?mod=nav_left_section">Markets</a></li>
  <a class="style--subsection-link--z3fnuRxn " tabindex="0" href="https://www.testdummysite.com/news/markets?mod=nav_left_section">Markets</a>

Below is the Error Response i get when trying to make the element visible by using the page.wait_for_selector()

TypeError: click() missing 1 required positional argument: 'selector'

Answer 1

From the docs, you should use a string as selector.

page.waitForSelector(selector[, options])

selector <string> A selector to to query for

page.click(selector[, options])

selector A selector to search for an element

selector = '//*[@id="sections-scroll-target"]/ul/ul/li[8]/a'
    
page.wait_for_selector(selector, timeout=10000)

page.hover(selector)

---

Looks like you want https://www.testdummysite.com/news/markets?mod=nav_left_section

If so this will work

//*[@href= "https://www.testdummysite.com/news/markets?mod=nav_left_section" ]

but these get a different link https://www.testdummysite.com/?mod=nav_left_section.

//*[@id="sections-scroll-target"]/ul/ul/li[8]/a

#sections-scroll-target > ul > ul > li:nth-child(8) > a

Because these URLs are similar, I wonder if you've posted the HTML accurately?