Puppeteer throws selector error when targeting Gmail compose button element

Other Questions Puppeteer
1

I’m working on an automated email script using Puppeteer and I’m stuck on a selector issue. When I try to click the Gmail compose button, I get a selector validation error.

Here’s what I did:

  1. Right-clicked the compose button in Gmail
  2. Selected “Inspect” from the context menu
  3. Copied the CSS selector from the developer tools
  4. The copied selector was #\3a 4e > div > div

But when I use this selector in my Puppeteer code, I get this error:

'#a 4e > div > div' is not a valid selector.

I noticed the \3 part got removed somehow. This is strange because I’ve used the same copy selector method on other websites without issues. Any idea why this specific Gmail selector isn’t working in Puppeteer?

2

That’s a CSS escape sequence issue. The \3a represents an escaped colon character, but it got mangled when you copied it - happens all the time with Gmail’s auto-generated selectors. I’ve hit this exact problem before. Gmail’s selectors are super unstable anyway since they change constantly. Skip the escaped characters and use div[role="button"][gh="cm"] instead - it targets the compose button way more reliably. The gh="cm" attribute stays consistent across Gmail updates in my experience. You could also wait for text content with page.waitForSelector('div:has-text("Compose")') if you’re on a newer Puppeteer version.

3

Yeah, Gmail’s dynamic selectors are a pain. Those escape sequences like \3a for colons break all the time when you copy them or feed them to Puppeteer. I stopped fighting with those fragile selectors and switched to XPath instead. Something like //div[@role='button' and contains(text(), 'Compose')] works way better. Just use page.waitForXPath() instead of waitForSelector(). Gmail changes its DOM constantly, so targeting visible text or stable attributes beats chasing auto-generated class names. Saves me tons of maintenance headaches. XPath has stayed solid through all their interface updates.

4

gmail selectors can be tricky, huh? I usually go for [data-tooltip="Compose"] or sometimes the aria-label works too. way less hassle than those escaped chars messing up your puppeteer code!