javascript - Playwright's "await locator.click()" fails with timeout. Why? - Stack Overflow

admin管理员组

文章数量:1335431

I'm writing an Electron app to scrape a web page using Playwright. I can successfully make my way through three sequential page requests, but can't get the field I need on the third page. The css selectors I've tried do not find the field. I'm new to Playwright so I've experimented a lot. I discovered the Locator, and that was able to find the field. The pattern I use is copied from the Playwright library documents:

const locator = page.locator('id="focus-input"');
await locator.click();

The first statement creates a locator with this content:

_frame:Frame {_events: {…}, _eventsCount: 0, _maxListeners: 0, _connection: Connection, _parent: BrowserContext, …}
_channel:Proxy {_events: {…}, _eventsCount: 2, _maxListeners: undefined, _object: Frame, Symbol(kCapture): false}
_childFrames:Set(2) {size: 2, Frame {_events, …}, Frame {…}}
_connection:Connection {_events: {…}, _eventsCount: 1, _maxListeners: undefined, _objects: Map(511), _waitingForObject: Map(0), …}
_csi:undefined
_detached:false
_eventEmitter:EventEmitter {_events: {…}, _eventsCount: 0, _maxListeners: 0, Symbol(kCapture): false}
_events:{}
_eventsCount:0
_guid:'frame@e0bbdb6106bf77e2c8a15b4d4d90ee26'
_initializer:{url: 'about:blank', name: '', parentFrame: undefined, loadStates: Array(0)}
_loadStates:Set(2) {size: 2, domcontentloaded, load}
_logger:undefined
_maxListeners:0
_name:''
_objects:Map(0) {size: 0}
_page:Page {_events: {…}, _eventsCount: 2, _maxListeners: 0, _connection: Connection, _parent: BrowserContext, …}
_selector:'id="focus-input"'
[[Prototype]]:Object

The second statement times out:

name:'TimeoutError'
message:'locator.click: Timeout 30000ms exceeded.

The HTML segment with the field I want is this input ponent with id="focus-input":

<input _ngcontent-c1="" aria-autoplete="list" autoplete="off" class="search-box mat-input-element mat-form-field-autofill-control ng-untouched ng-pristine ng-valid" id="focus-input" matinput="" role="bobox" style="text-transform:uppercase" type="search" aria-expanded="false" aria-owns="mat-autoplete-0" placeholder="Search Ticker or Company" aria-invalid="false" aria-required="false">

Why won't this work for me?

I'm writing an Electron app to scrape a web page using Playwright. I can successfully make my way through three sequential page requests, but can't get the field I need on the third page. The css selectors I've tried do not find the field. I'm new to Playwright so I've experimented a lot. I discovered the Locator, and that was able to find the field. The pattern I use is copied from the Playwright library documents:

const locator = page.locator('id="focus-input"');
await locator.click();

The first statement creates a locator with this content:

_frame:Frame {_events: {…}, _eventsCount: 0, _maxListeners: 0, _connection: Connection, _parent: BrowserContext, …}
_channel:Proxy {_events: {…}, _eventsCount: 2, _maxListeners: undefined, _object: Frame, Symbol(kCapture): false}
_childFrames:Set(2) {size: 2, Frame {_events, …}, Frame {…}}
_connection:Connection {_events: {…}, _eventsCount: 1, _maxListeners: undefined, _objects: Map(511), _waitingForObject: Map(0), …}
_csi:undefined
_detached:false
_eventEmitter:EventEmitter {_events: {…}, _eventsCount: 0, _maxListeners: 0, Symbol(kCapture): false}
_events:{}
_eventsCount:0
_guid:'frame@e0bbdb6106bf77e2c8a15b4d4d90ee26'
_initializer:{url: 'about:blank', name: '', parentFrame: undefined, loadStates: Array(0)}
_loadStates:Set(2) {size: 2, domcontentloaded, load}
_logger:undefined
_maxListeners:0
_name:''
_objects:Map(0) {size: 0}
_page:Page {_events: {…}, _eventsCount: 2, _maxListeners: 0, _connection: Connection, _parent: BrowserContext, …}
_selector:'id="focus-input"'
[[Prototype]]:Object

The second statement times out:

name:'TimeoutError'
message:'locator.click: Timeout 30000ms exceeded.

The HTML segment with the field I want is this input ponent with id="focus-input":

<input _ngcontent-c1="" aria-autoplete="list" autoplete="off" class="search-box mat-input-element mat-form-field-autofill-control ng-untouched ng-pristine ng-valid" id="focus-input" matinput="" role="bobox" style="text-transform:uppercase" type="search" aria-expanded="false" aria-owns="mat-autoplete-0" placeholder="Search Ticker or Company" aria-invalid="false" aria-required="false">

Why won't this work for me?

• javascript
• playwright

Share Improve this question Follow asked Nov 21, 2021 at 19:26 MartinDuoMartinDuo 75322 gold badges1313 silver badges2828 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

There is an issue with your selector.

It should be:

//                                ↓ without quotes
const locator = page.locator('id=focus-input');

or it also could be:

const locator = page.locator('#focus-input');

本文标签： javascriptPlaywright39s quotawait locatorclick()quot fails with timeout WhyStack Overflow