1"use strict";(self.webpackChunkplaywright_dev=self.webpackChunkplaywright_dev||[]).push([["3487"],{2941(e,t,l){l.r(t),l.d(t,{metadata:()=>s,default:()=>x,frontMatter:()=>r,contentTitle:()=>c,toc:()=>o,assets:()=>d});var s=JSON.parse('{"id":"actionability","title":"Auto-waiting","description":"Introduction","source":"@site/versioned_docs/version-stable/actionability.mdx","sourceDirName":".","slug":"/actionability","permalink":"/docs/actionability","draft":false,"unlisted":false,"tags":[],"version":"stable","frontMatter":{"id":"actionability","title":"Auto-waiting"},"sidebar":"docs","previous":{"title":"Authentication","permalink":"/docs/auth"},"next":{"title":"Best Practices","permalink":"/docs/best-practices"}}'),i=l(74848),n=l(28453);l(13554),l(41647),l(83137);let r={id:"actionability",title:"Auto-waiting"},c,d={},o=[{value:"Introduction",id:"introduction",level:2},{value:"Forcing actions",id:"forcing-actions",level:2},{value:"Assertions",id:"assertions",level:2},{value:"Visible",id:"visible",level:2},{value:"Stable",id:"stable",level:2},{value:"Enabled",id:"enabled",level:2},{value:"Editable",id:"editable",level:2},{value:"Receives Events",id:"receives-events",level:2}];function a(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h2,{id:"introduction",children:"Introduction"}),"\n",(0,i.jsxs)(t.p,{children:["Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. It auto-waits for all the relevant checks to pass and only then performs the requested action. If the required checks do not pass within the given ",(0,i.jsx)(t.code,{children:"timeout"}),", action fails with the ",(0,i.jsx)(t.code,{children:"TimeoutError"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["For example, for ",(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-click",children:"locator.click()"}),", Playwright will ensure that:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"locator resolves to exactly one element"}),"\n",(0,i.jsxs)(t.li,{children:["element is ",(0,i.jsx)(t.a,{href:"#visible",title:"Visible",children:"Visible"})]}),"\n",(0,i.jsxs)(t.li,{children:["element is ",(0,i.jsx)(t.a,{href:"#stable",title:"Stable",children:"Stable"}),", as in not animating or completed animation"]}),"\n",(0,i.jsxs)(t.li,{children:["element ",(0,i.jsx)(t.a,{href:"#receives-events",title:"Receives Events",children:"Receives Events"}),", as in not obscured by other elements"]}),"\n",(0,i.jsxs)(t.li,{children:["element is ",(0,i.jsx)(t.a,{href:"#enabled",title:"Enabled",children:"Enabled"})]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Here is the complete list of actionability checks performed for each action:"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Action"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:(0,i.jsx)(t.a,{href:"#visible",title:"Visible",children:"Visible"})}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:(0,i.jsx)(t.a,{href:"#stable",title:"Stable",children:"Stable"})}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:(0,i.jsx)(t.a,{href:"#receives-events",title:"Receives Events",children:"Receives Events"})}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:(0,i.jsx)(t.a,{href:"#enabled",title:"Enabled",children:"Enabled"})}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:(0,i.jsx)(t.a,{href:"#editable",title:"Editable",children:"Editable"})})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-check",children:"locator.check()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-click",children:"locator.click()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-dblclick",children:"locator.dblclick()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-set-checked",children:"locator.setChecked()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-tap",children:"locator.tap()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-uncheck",children:"locator.uncheck()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-hover",children:"locator.hover()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-drag-to",children:"locator.dragTo()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-screenshot",children:"locator.screenshot()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-fill",children:"locator.fill()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-clear",children:"locator.clear()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-select-option",children:"locator.selectOption()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-select-text",children:"locator.selectText()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-scroll-into-view-if-needed",children:"locator.scrollIntoViewIfNeeded()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"Yes"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-blur",children:"locator.blur()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-dispatch-event",children:"locator.dispatchEvent()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-focus",children:"locator.focus()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-press",children:"locator.press()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-press-sequentially",children:"locator.pressSequentially()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-set-input-files",children:"locator.setInputFiles()"})}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"-"})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"forcing-actions",children:"Forcing actions"}),"\n",(0,i.jsxs)(t.p,{children:["Some actions like ",(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-click",children:"locator.click()"})," support ",(0,i.jsx)(t.code,{children:"force"})," option that disables non-essential actionability checks, for example passing truthy ",(0,i.jsx)(t.code,{children:"force"})," to ",(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-click",children:"locator.click()"})," method will not check that the target element actually receives click events."]}),"\n",(0,i.jsx)(t.h2,{id:"assertions",children:"Assertions"}),"\n",(0,i.jsx)(t.p,{children:"Playwright includes auto-retrying assertions that remove flakiness by waiting until the condition is met, similarly to auto-waiting before actions."}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Assertion"}),(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-attached",children:"expect(locator).toBeAttached()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is attached"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-checked",children:"expect(locator).toBeChecked()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Checkbox is checked"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-disabled",children:"expect(locator).toBeDisabled()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is disabled"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-editable",children:"expect(locator).toBeEditable()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is editable"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-empty",children:"expect(locator).toBeEmpty()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Container is empty"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-enabled",children:"expect(locator).toBeEnabled()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is enabled"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-focused",children:"expect(locator).toBeFocused()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is focused"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertion
1s-to-be-hidden",children:"expect(locator).toBeHidden()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is not visible"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-in-viewport",children:"expect(locator).toBeInViewport()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element intersects viewport"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-be-visible",children:"expect(locator).toBeVisible()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element is visible"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-contain-text",children:"expect(locator).toContainText()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element contains text"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-attribute",children:"expect(locator).toHaveAttribute()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element has a DOM attribute"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-class",children:"expect(locator).toHaveClass()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element has a class property"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-count",children:"expect(locator).toHaveCount()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"List has exact number of children"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-css",children:"expect(locator).toHaveCSS()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element has CSS property"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-id",children:"expect(locator).toHaveId()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element has an ID"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-js-property",children:"expect(locator).toHaveJSProperty()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element has a JavaScript property"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-text",children:"expect(locator).toHaveText()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Element matches text"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-value",children:"expect(locator).toHaveValue()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Input has a value"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-locatorassertions#locator-assertions-to-have-values",children:"expect(locator).toHaveValues()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Select has options selected"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-pageassertions#page-assertions-to-have-title",children:"expect(page).toHaveTitle()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Page has a title"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-pageassertions#page-assertions-to-have-url",children:"expect(page).toHaveURL()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Page has a URL"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:(0,i.jsx)(t.a,{href:"/docs/api/class-apiresponseassertions#api-response-assertions-to-be-ok",children:"expect(response).toBeOK()"})}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Response has an OK status"})]})]})]}),"\n",(0,i.jsxs)(t.p,{children:["Learn more in the ",(0,i.jsx)(t.a,{href:"/docs/test-assertions",children:"assertions guide"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"visible",children:"Visible"}),"\n",(0,i.jsxs)(t.p,{children:["Element is considered visible when it has non-empty bounding box and does not have ",(0,i.jsx)(t.code,{children:"visibility:hidden"})," computed style."]}),"\n",(0,i.jsx)(t.p,{children:"Note that according to this definition:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Elements of zero size ",(0,i.jsx)(t.strong,{children:"are not"})," considered visible."]}),"\n",(0,i.jsxs)(t.li,{children:["Elements with ",(0,i.jsx)(t.code,{children:"display:none"})," ",(0,i.jsx)(t.strong,{children:"are not"})," considered visible."]}),"\n",(0,i.jsxs)(t.li,{children:["Elements with ",(0,i.jsx)(t.code,{children:"opacity:0"})," ",(0,i.jsx)(t.strong,{children:"are"})," considered visible."]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"stable",children:"Stable"}),"\n",(0,i.jsx)(t.p,{children:"Element is considered stable when it has maintained the same bounding box for at least two consecutive animation frames."}),"\n",(0,i.jsx)(t.h2,{id:"enabled",children:"Enabled"}),"\n",(0,i.jsxs)(t.p,{children:["Element is considered enabled when it is ",(0,i.jsx)(t.strong,{children:"not disabled"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Element is ",(0,i.jsx)(t.strong,{children:"disabled"})," when:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["it is a ",(0,i.jsx)(t.code,{children:"<button>"}),", ",(0,i.jsx)(t.code,{children:"<select>"}),", ",(0,i.jsx)(t.code,{children:"<input>"}),", ",(0,i.jsx)(t.code,{children:"<textarea>"}),", ",(0,i.jsx)(t.code,{children:"<option>"})," or ",(0,i.jsx)(t.code,{children:"<optgroup>"})," with a ",(0,i.jsx)(t.code,{children:"[disabled]"})," attribute;"]}),"\n",(0,i.jsxs)(t.li,{children:["it is a ",(0,i.jsx)(t.code,{children:"<button>"}),", ",(0,i.jsx)(t.code,{children:"<select>"}),", ",(0,i.jsx)(t.code,{children:"<input>"}),", ",(0,i.jsx)(t.code,{children:"<textarea>"}),", ",(0,i.jsx)(t.code,{children:"<option>"})," or ",(0,i.jsx)(t.code,{children:"<optgroup>"})," that is a part of a ",(0,i.jsx)(t.code,{children:"<fieldset>"})," with a ",(0,i.jsx)(t.code,{children:"[disabled]"})," attribute;"]}),"\n",(0,i.jsxs)(t.li,{children:["it is a descendant of an element with ",(0,i.jsx)(t.code,{children:"[aria-disabled=true]"})," attribute."]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"editable",children:"Editable"}),"\n",(0,i.jsxs)(t.p,{children:["Element is considered editable when it is ",(0,i.jsx)(t.a,{href:"#enabled",title:"Enabled",children:"enabled"})," and is ",(0,i.jsx)(t.strong,{children:"not readonly"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Element is ",(0,i.jsx)(t.strong,{children:"readonly"})," when:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["it is a ",(0,i.jsx)(t.code,{children:"<select>"}),", ",(0,i.jsx)(t.code,{children:"<input>"})," or ",(0,i.jsx)(t.code,{children:"<textarea>"})," with a ",(0,i.jsx)(t.code,{children:"[readonly]"})," attribute;"]}),"\n",(0,i.jsxs)(t.li,{children:["it has an ",(0,i.jsx)(t.code,{children:"[aria-readonly=true]"})," attribute and an aria role that ",(0,i.jsx)(t.a,{href:"https://w3c.github.io/aria/#aria-readonly",children:"supports it"}),"."]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"receives-events",children:"Receives Events"}),"\n",(0,i.jsxs)(t.p,{children:["Element is considered receiving pointer events when it is the hit target of the pointer event at the action point. For example, when clicking at the point ",(0,i.jsx)(t.code,{children:"(10;10)"}),", Playwright checks whether some other element (usually an overlay) will instead capture the click at ",(0,i.jsx)(t.code,{children:"(10;10)"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["For example, consider a scenario where Playwright will click ",(0,i.jsx)(t.code,{children:"Sign Up"})," button regardless of when the ",(0,i.jsx)(t.a,{href:"/docs/api/class-locator#locator-click",children:"locator.click()"})," call was made:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["page is checking that user name is unique and ",(0,i.jsx)(t.code,{children:"Sign Up"})," button is disabled;"]}),"\n",(0,i.jsxs)(t.li,{children:["after checking with the server, the disabled ",(0,i.jsx)(t.code,{children:"Sign Up"})," button is replaced with another one that is now enabled."]}),"\n"]})]})}function x(e={}){let{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.