Question 416210 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – What makes an element unclickable when using locator(), but clickable when using $()?

I’m trying to automate posting content to Facebook. Assuming you don’t need to login, here is my code:

import { Page } from "npm:puppeteer";

// Initiate
const browser = await puppeteer.launch({
headless: false,
userDataDir: "./user_data",
args: minimal_args.concat(args),
});
const page = await browser.newPage();
await page.goto("https://facebook.com/");

// Create a post
await page.locator("::-p-text(What's on your mind)").click();
await page.keyboard.type(text);

// Click the next button
const nextButtonSelector = '*[aria-label="Next"][role="button"]';
await (await page.$(nextButtonSelector))!.click(); // this works
// await page.locator(nextButtonSelector).click(); // timeout

// Click the post button
await page.locator('*[aria-label="Post"][role="button"]').click();

At the "Click the next button" step, I have to use the Page.$() method, not Page.locator() one. I notice that when no character has been typed in yet, the button is gray out, indicates that it is disabled. I suspect this plays a role in here, but I cannot explain better. The excellent answer in Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()? explains the difference between the two, but I don’t know how to apply the knowledge in here.

Here is the full element:

<div class="x9f619 x1ja2u2z x78zum5 x1n2onr6 x1r8uery x1iyjqo2 xs83m0k xeuugli x1qughib x6s0dn4 xozqiw3 x1q0g3np x1pi30zi x1swvt13 xyamay9 xcud41i x139jcc6 x4vbgl9 x1rdy4ex">
  <div class="x9f619 x1n2onr6 x1ja2u2z x78zum5 xdt5ytf x193iq5w xeuugli x1r8uery x1iyjqo2 xs83m0k x150jy0e x1e558r4 xjkvuk6 x1iorvi4">
    <div aria-label="Next" class="x1i10hfl xjbqb8w x1ejq31n xd10rxx x1sy0etr x17r0tee x972fbf xcfux6l x1qhh985 xm0m39n x1ypdohk xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m x87ps6o x1lku1pv x1a2a7pz x9f619 x3nfvp2 xdt5ytf xl56j7k x1n2onr6 xh8yej3"
      role="button" tabindex="0">
      <div role="none" class="x1ja2u2z x78zum5 x2lah0s x1n2onr6 xl56j7k x6s0dn4 xozqiw3 x1q0g3np xi112ho x17zwfj4 x585lrc x1403ito x972fbf xcfux6l x1qhh985 xm0m39n x9f619 xn6708d x1ye3gou xtvsq51 x1r1pt67">
        <div class="x6s0dn4 x78zum5 xl56j7k x1608yet xljgi0e x1e0frkt">
          <div role="none" class="x9f619 x1n2onr6 x1ja2u2z x193iq5w xeuugli x6s0dn4 x78zum5 x2lah0s x1fbi1t2 xl8fo4v"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x1lliihq x1s928wv xhkezso x1gmr53x x1cpjm7i x1fgarty x1943h6x xudqn12 x3x7a5m x6prxxf xvq8zen x1s688f xtk6v10" dir="auto"><span class="x1lliihq x6ikm8r x10wlt62 x1n2onr6 xlyipyv xuxw1ft">Next</span></span>
          </div>
        </div>
        <div class="x1ey2m1c xds687c x17qophe xg01cxk x47corl x10l6tqk x13vifvy x1ebt8du x19991ni x1dhq9h x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m" role="none" data-visualcompletion="ignore" style="inset: 0px;"></div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This seems to be fixed in version 23.9.0


  2. 0

    You’re not selecting the textbox. Psuedo selector do not work programmatically.

    try

    await page.locator(`*[data-lexical-editor="true"][aria-label^="What's on your mind"]`).click();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search