Invalidate stalled elements in ElementStore (webdriverio#5768)

shawnlobo96 · Aug 28, 2020 · a676b4c · a676b4c
1 parent b0a19d5
commit a676b4c
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 33 deletions.
diff --git a/packages/devtools/src/commands/elementClear.js b/packages/devtools/src/commands/elementClear.js
@@ -11,7 +11,7 @@ import command from '../scripts/elementClear'
 import { getStaleElementError } from '../utils'
 
 export default async function elementClear ({ elementId }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/elementClick.js b/packages/devtools/src/commands/elementClick.js
@@ -19,7 +19,7 @@ const SELECT_SCRIPT = 'return (function select (elem) { elem.selected = true }).
 
 export default async function elementClick ({ elementId }) {
  const page = this.getPageHandle()
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/elementSendKeys.js b/packages/devtools/src/commands/elementSendKeys.js
@@ -14,7 +14,7 @@ import { getStaleElementError } from '../utils'
 import path from 'path'
 
 export default async function elementSendKeys ({ elementId, text }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/executeAsyncScript.js b/packages/devtools/src/commands/executeAsyncScript.js
@@ -35,7 +35,7 @@ export default async function executeAsyncScript ({ script, args }) {
  scriptTimeout,
  SERIALIZE_PROPERTY,
  SERIALIZE_FLAG,
- ...transformExecuteArgs.call(this, args)
+ ...(await transformExecuteArgs.call(this, args))
  )
 
  return transformExecuteResult.call(this, page, result)

diff --git a/packages/devtools/src/commands/executeScript.js b/packages/devtools/src/commands/executeScript.js
@@ -32,7 +32,7 @@ export default async function executeScript ({ script, args }) {
  script,
  SERIALIZE_PROPERTY,
  SERIALIZE_FLAG,
- ...transformExecuteArgs.call(this, args)
+ ...(await transformExecuteArgs.call(this, args))
  )
 
  let executeTimeout

diff --git a/packages/devtools/src/commands/findElementFromElement.js b/packages/devtools/src/commands/findElementFromElement.js
@@ -17,7 +17,7 @@ export default async function findElementFromElement ({ elementId, using, value
  throw new Error(`selector strategy "${using}" is not yet supported`)
  }
 
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/findElementsFromElement.js b/packages/devtools/src/commands/findElementsFromElement.js
@@ -17,7 +17,7 @@ export default async function findElementFromElements ({ elementId, using, value
  throw new Error(`selector strategy "${using}" is not yet supported`)
  }
 
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementAttribute.js b/packages/devtools/src/commands/getElementAttribute.js
@@ -12,7 +12,7 @@ import command from '../scripts/getElementAttribute'
 import { getStaleElementError } from '../utils'
 
 export default async function getElementAttribute ({ elementId, name }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementCSSValue.js b/packages/devtools/src/commands/getElementCSSValue.js
@@ -13,7 +13,7 @@ import command from '../scripts/getElementCSSValue'
 import { getStaleElementError } from '../utils'
 
 export default async function getElementCSSValue ({ elementId, propertyName }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementProperty.js b/packages/devtools/src/commands/getElementProperty.js
@@ -11,7 +11,7 @@
 import { getStaleElementError } from '../utils'
 
 export default async function getElementProperty ({ elementId, name }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementRect.js b/packages/devtools/src/commands/getElementRect.js
@@ -10,8 +10,8 @@
 import command from '../scripts/getElementRect'
 import { getStaleElementError } from '../utils'
 
-export default function getElementRect ({ elementId }) {
- const elementHandle = this.elementStore.get(elementId)
+export default async function getElementRect ({ elementId }) {
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementTagName.js b/packages/devtools/src/commands/getElementTagName.js
@@ -11,7 +11,7 @@ import command from '../scripts/getElementTagName'
 import { getStaleElementError } from '../utils'
 
 export default async function getElementTagName ({ elementId }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/getElementText.js b/packages/devtools/src/commands/getElementText.js
@@ -12,8 +12,8 @@
 import command from '../scripts/getElementText'
 import { getStaleElementError } from '../utils'
 
-export default function getElementText ({ elementId }) {
- const elementHandle = this.elementStore.get(elementId)
+export default async function getElementText ({ elementId }) {
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementId)

diff --git a/packages/devtools/src/commands/switchToFrame.js b/packages/devtools/src/commands/switchToFrame.js
@@ -30,7 +30,7 @@ export default async function switchToFrame ({ id }) {
  * switch frame by element ID
  */
  if (typeof id[ELEMENT_KEY] === 'string') {
- const elementHandle = this.elementStore.get(id[ELEMENT_KEY])
+ const elementHandle = await this.elementStore.get(id[ELEMENT_KEY])
 
  if (!elementHandle) {
  throw getStaleElementError(elementHandle)

diff --git a/packages/devtools/src/commands/takeElementScreenshot.js b/packages/devtools/src/commands/takeElementScreenshot.js
@@ -11,7 +11,7 @@
 import { getStaleElementError } from '../utils'
 
 export default async function takeElementScreenshot ({ elementId }) {
- const elementHandle = this.elementStore.get(elementId)
+ const elementHandle = await this.elementStore.get(elementId)
 
  if (!elementHandle) {
  throw getStaleElementError(elementHandle)

diff --git a/packages/devtools/src/elementstore.js b/packages/devtools/src/elementstore.js
@@ -10,8 +10,19 @@ export default class ElementStore {
  return index
  }
 
- get (index) {
- return this.elementMap.get(index)
+ async get (index) {
+ const elementHandle = this.elementMap.get(index)
+
+ if (!elementHandle) {
+ return elementHandle
+ }
+
+ const isElementAttachedToDOM = await elementHandle.evaluate(el => {
+ // https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected
+ return el.isConnected
+ })
+
+ return isElementAttachedToDOM ? elementHandle : undefined
  }
 
  clear () {

diff --git a/packages/devtools/src/utils.js b/packages/devtools/src/utils.js
@@ -162,10 +162,10 @@ export function sanitizeError (err) {
 /**
  * transform elements in argument list to Puppeteer element handles
  */
-export function transformExecuteArgs (args = []) {
- return args.map((arg) => {
+export async function transformExecuteArgs (args = []) {
+ return Promise.all(args.map(async (arg) => {
  if (arg[ELEMENT_KEY]) {
- const elementHandle = this.elementStore.get(arg[ELEMENT_KEY])
+ const elementHandle = await this.elementStore.get(arg[ELEMENT_KEY])
 
  if (!elementHandle) {
  throw getStaleElementError(arg[ELEMENT_KEY])
@@ -175,7 +175,7 @@ export function transformExecuteArgs (args = []) {
  }
 
  return arg
- })
+ }))
 }
 
 /**

diff --git a/packages/devtools/tests/elementStore.test.js b/packages/devtools/tests/elementStore.test.js
@@ -1,13 +1,29 @@
 import ElementStore from '../src/elementstore'
 
-test('should keep a map of elements', () => {
+const elementHandleFactory = ({ isConnected = true } = {}) => ({
+ id: Math.random(),
+ async evaluate(cb) {
+ return cb({ isConnected })
+ }
+})
+
+test('should keep a map of elements', async () => {
  const store = new ElementStore()
- store.set('foobar')
- expect(store.get('ELEMENT-1')).toBe('foobar')
+ const elementHandle1 = elementHandleFactory()
+ store.set(elementHandle1)
+ expect(await store.get('ELEMENT-1')).toBe(elementHandle1)
 
  store.clear()
  expect(store.elementMap.size).toBe(0)
 
- store.set('barfoo')
- expect(store.get('ELEMENT-2')).toBe('barfoo')
+ const elementHandle2 = elementHandleFactory()
+ store.set(elementHandle2)
+ expect(await store.get('ELEMENT-2')).toBe(elementHandle2)
+})
+
+test('should not return element if it is not attached to the DOM', async () => {
+ const store = new ElementStore()
+ const elementHandle = elementHandleFactory({ isConnected: false })
+ store.set(elementHandle)
+ expect(await store.get('ELEMENT-3')).toBe(undefined)
 })
diff --git a/packages/devtools/tests/utils.test.js b/packages/devtools/tests/utils.test.js
@@ -268,28 +268,28 @@ describe('sanitizeError', () => {
  })
 })
 
-test('transformExecuteArgs', () => {
+test('transformExecuteArgs', async () => {
  const scope = { elementStore: new Map() }
  scope.elementStore.set('foobar', 'barfoo')
 
- expect(transformExecuteArgs.call(scope, [
+ expect(await transformExecuteArgs.call(scope, [
  'foo',
  { 'element-6066-11e4-a52e-4f735466cecf': 'foobar' },
  true,
  42
  ])).toEqual(['foo', 'barfoo', true, 42])
 })
 
-test('transformExecuteArgs throws stale element if element is not in store', () => {
+test('transformExecuteArgs throws stale element if element is not in store', async () => {
  const scope = { elementStore: new Map() }
  scope.elementStore.set('foobar', 'barfoo')
 
- expect(() => transformExecuteArgs.call(scope, [
+ expect(transformExecuteArgs.call(scope, [
  'foo',
  { 'element-6066-11e4-a52e-4f735466cecf': 'not-existing' },
  true,
  42
- ])).toThrow()
+ ])).rejects.toThrow()
 })
 
 describe('transformExecuteResult', () => {