Playwright 的“等待 locator.click()”因超时而失败。为什么？

Question

我正在编写一个 Electron 应用程序来使用 Playwright 抓取网页。我可以成功通过三个连续的页面请求，但无法在第三页上获得我需要的字段。我尝试过的 css 选择器找不到该字段。我是剧作家的新手，所以我做了很多实验。我发现了定位器，它能够找到该字段。我使用的模式是从 Playwright 库文档中复制而来的：

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

第一条语句创建一个包含以下内容的定位器：

_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

第二条语句超时：

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

带有我想要的字段的 HTML 段是这个 id="focus-input" 的输​​入组件：

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

为什么这对我不起作用？

Answer 1

您的选择器有问题。

应该是：

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

也可以是：

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