feat(expect-puppeteer): add visibility option to toMatchElement (#208)

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 lib/
+yarn-error.log

packages/expect-puppeteer/README.md

@@ -165,6 +165,7 @@ Expect an element be present in the page or element.
  - `mutation` - to execute `pageFunction` on every DOM mutation.
  - `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `30000` (30 seconds). Pass `0` to disable timeout. The default value can be changed by using the [page.setDefaultTimeout(timeout)](#pagesetdefaulttimeouttimeout) method.
  - `text` <[string]|[RegExp]> A text or a RegExp to match in element `textContent`.
+ - `visible` <[boolean]> wait for element to be present in DOM and to be visible, i.e. to not have `display: none` or `visibility: hidden` CSS properties. Defaults to `false`.
 
 ```js
 // Select a row containing a text

packages/expect-puppeteer/src/matchers/toMatchElement.js

@@ -4,27 +4,44 @@ import { defaultOptions } from '../options'
 async function toMatchElement(
  instance,
  selector,
- { text: searchExpr, ...options } = {},
+ { text: searchExpr, visible = false, ...options } = {},
 ) {
  options = defaultOptions(options)
-
  const { page, handle } = await getContext(instance, () => document)
 
  const { text, regexp } = expandSearchExpr(searchExpr)
 
- const getElement = (handle, selector, text, regexp) => {
- const elements = handle.querySelectorAll(selector)
+ const getElement = (handle, selector, text, regexp, visible) => {
+ function hasVisibleBoundingBox(element) {
+ const rect = element.getBoundingClientRect()
+ return !!(rect.top || rect.bottom || rect.width || rect.height)
+ }
+
+ const isVisible = element => {
+ if (visible) {
+ const style = window.getComputedStyle(element)
+ return (
+ style &&
+ style.visibility !== 'hidden' &&
+ hasVisibleBoundingBox(element)
+ )
+ }
+
+ return true
+ }
+
+ const elements = [...handle.querySelectorAll(selector)].filter(isVisible)
  if (regexp !== null) {
  const [, pattern, flags] = regexp.match(/\/(.*)\/(.*)?/)
- return [...elements].find(({ textContent }) =>
+ return elements.find(({ textContent }) =>
  textContent
  .replace(/\s+/g, ' ')
  .trim()
  .match(new RegExp(pattern, flags)),
  )
  }
  if (text !== null) {
- return [...elements].find(({ textContent }) =>
+ return elements.find(({ textContent }) =>
  textContent
  .replace(/\s+/g, ' ')
  .trim()
@@ -42,6 +59,7 @@ async function toMatchElement(
  selector,
  text,
  regexp,
+ visible,
  )
  } catch (error) {
  throw enhanceError(
@@ -58,6 +76,7 @@ async function toMatchElement(
  selector,
  text,
  regexp,
+ visible,
  )
  return jsHandle.asElement()
 }

packages/expect-puppeteer/src/matchers/toMatchElement.test.js

@@ -37,6 +37,42 @@ describe('toMatchElement', () => {
  expect(error.message).toMatch('waiting for function failed')
  }
  })
+
+ it('should match using visible options', async () => {
+ expect.assertions(11)
+
+ const normalElement = await expect(page).toMatchElement('.normal', {
+ visible: true,
+ })
+ const textContentProperty = await normalElement.getProperty('textContent')
+ const textContent = await textContentProperty.jsonValue()
+ expect(textContent).toBe('normal element')
+
+ try {
+ await expect(page).toMatchElement('.hidden', { visible: true })
+ } catch (error) {
+ expect(error.message).toMatch('Element .hidden not found')
+ expect(error.message).toMatch('waiting for function failed')
+ }
+
+ try {
+ await expect(page).toMatchElement('.displayed', { visible: true })
+ } catch (error) {
+ expect(error.message).toMatch('Element .displayed not found')
+ expect(error.message).toMatch('waiting for function failed')
+ }
+
+ try {
+ await expect(page).toMatchElement('.displayedWithClassname', {
+ visible: true,
+ })
+ } catch (error) {
+ expect(error.message).toMatch(
+ 'Element .displayedWithClassname not found',
+ )
+ expect(error.message).toMatch('waiting for function failed')
+ }
+ })
  })
 
  describe('ElementHandle', () => {

server/public/index.html

@@ -5,6 +5,11 @@
  <meta charset="utf-8">
  <title>Test App</title>
 </head>
+<style>
+ .displayedWithClassname {
+ display: none;
+ }
+</style>
 
 <body>
  <header>This is home!</header>
@@ -25,6 +30,10 @@
  <div id="in-the-main">
  A div in the main
  </div>
+ <div style="visibility: hidden;" class="hidden">hidden element</div>
+ <div style="display: none" class="displayed">displayed element</div>
+ <div class="displayedWithClassname">displayed element</div>
+ <div class="normal">normal element</div>
  </main>
 </body>