describe ( 'selection' , ( ) => { type CssStyleObject = Partial < CSSStyleDeclaration > & Record < string , string | null > ; const compareColor = ( color , property ) => ( targetElement ) => { const tempElement = document . createElement ( 'div' ) ; tempElement . style . color = color ; tempElement . style . display = 'none' ; document . body . appendChild ( tempElement ) ; const tempColor = getComputedStyle ( tempElement ) . color ; const targetStyle = getComputedStyle ( targetElement [ 0 ] ) as CssStyleObject ; const targetColor = targetStyle [ property ] ; document . body . removeChild ( tempElement ) ; expect ( tempColor ) . to . equal ( targetColor ) ; } ; Cypress . Commands . overwrite ( 'should' , ( originalFn , subject , expectation , ... args ) => { const customMatchers = { 'have.backgroundColor' : compareColor ( args [ 0 ] , 'backgroundColor' ) , 'have.color' : compareColor ( args [ 0 ] , 'color' ) , } ; if ( typeof expectation === 'string' && customMatchers [ expectation ] ) { return originalFn ( subject , customMatchers [ expectation ] ) ; } return originalFn ( subject , expectation , ... args ) ; } ) ; const slateEditor = '[data-slate-node="element"]' ; beforeEach ( ( ) => cy . visit ( 'examples/richtext' ) ) ; it ( 'select the correct block when triple clicking' , ( ) => { for ( let i = 0 ; i < 3 ; i ++ ) { cy . get ( slateEditor ) . eq ( 1 ) . click ( ) ; } cy . contains ( '.material-icons' , /format_quote/ ) . parent ( ) . should ( 'have.color' , '#ccc' ) ; } ) ; } ) ;