add pop id prop to fix integration tests

components/BackgroundSelect.js

@@ -49,7 +49,12 @@ class BackgroundSelect extends React.PureComponent {
             <div className="bg-color" />
           </div>
         </div>
-        <Popout pointerLeft="15px" hidden={!isVisible} style={{ width: '222px' }}>
+        <Popout
+          id="bg-select-pickers"
+          pointerLeft="15px"
+          hidden={!isVisible}
+          style={{ width: '222px' }}
+        >
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
               <div

components/Popout.js

@@ -36,14 +36,14 @@ class Popout extends React.PureComponent {
   }
 
   render() {
-    const { children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
+    const { id, children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
 
     if (hidden) {
       return null
     }
 
     return (
-      <div className="popout" style={style}>
+      <div id={id} className="popout" style={style}>
         <WindowPointer fromLeft={pointerLeft} fromRight={pointerRight} color={borderColor} />
         {children}
         <style jsx>

cypress/integration/background-color-spec.js

@@ -8,7 +8,7 @@ import { editorVisible } from '../support'
 
 describe('background color', () => {
   const bgColor = '.bg-color-container .bg-color'
-  const picker = '.bg-select-pickers'
+  const picker = '#bg-select-pickers'
 
   const openPicker = () => {
     cy.get(bgColor).click()