import * as SUT from '../index' ; import { getWindowState } from '../../../page-actions' ; import { getIntersectionRatioOfHandle } from '../../get-intersection-ratio-of-handle' ; import { sleep } from '../../../../utils' ; import { defaultVerboseOptions } from '../../is-handle-visible' ; import { Browser , webkit } from 'playwright' ; import * as path from 'path' ; describe . skip ( 'handle is visible in viewport' , ( ) : void => { let browser = undefined ; beforeEach ( ( ) : void => { } ) ; afterEach ( async ( ) : Promise < void > => { if ( browser ) { await browser . close ( ) ; } } ) ; test ( 'should return false when selector is hidden - webkit' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#hidden' ) ; const result = await SUT . isHandleVisibleInViewport ( handle , defaultVerboseOptions ) ; expect ( handle ) . toBeDefined ( ) ; expect ( result ) . toBe ( false ) ; } ) ; test ( 'should return true when selector is visible in viewport' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#visible' ) ; const result = await SUT . isHandleVisibleInViewport ( handle , defaultVerboseOptions ) ; expect ( handle ) . toBeDefined ( ) ; expect ( result ) . toBe ( true ) ; } ) ; test ( 'should return false when selector is transparent' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#transparent' ) ; const result = await SUT . isHandleVisibleInViewport ( handle , defaultVerboseOptions ) ; expect ( handle ) . toBeDefined ( ) ; expect ( result ) . toBe ( false ) ; } ) ; test ( 'should return false when selector is out of screen' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#out-of-screen' ) ; const result = await SUT . isHandleVisibleInViewport ( handle , defaultVerboseOptions ) ; expect ( handle ) . toBeDefined ( ) ; expect ( result ) . toBe ( false ) ; } ) ; test ( 'should return false when selector is out of viewport' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#out-of-viewport' ) ; const result = await SUT . isHandleVisibleInViewport ( handle , defaultVerboseOptions ) ; expect ( handle ) . toBeDefined ( ) ; expect ( result ) . toBe ( false ) ; } ) ; test . skip ( 'should return 1 when selector is in viewport - issue playwright headless' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : true } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#visible' ) ; const visibleRatio = await getIntersectionRatioOfHandle ( handle ) ; console . log ( `visible ratio is ${ visibleRatio }` ) ; const windowState = await getWindowState ( page ) ; console . log ( `windowState:\n ${ JSON . stringify ( windowState , null , 2 ) }` ) ; expect ( handle ) . toBeDefined ( ) ; expect ( visibleRatio ) . toBe ( 1 ) ; } ) ; test . skip ( 'should return 1 when selector is in viewport - issue playwright headfull' , async ( ) : Promise < void > => { browser = await webkit . launch ( { headless : false } ) ; const browserContext = await browser . newContext ( { viewport : null } ) ; const page = await browserContext . newPage ( ) ; const url = `file:${ path . join ( __dirname , 'is-handle-visible-in-viewport.test.html' ) }` ; await page . goto ( url ) ; await sleep ( 1000 ) ; const handle = await page . $ ( '#visible' ) ; const visibleRatio = await getIntersectionRatioOfHandle ( handle ) ; console . log ( `visible ratio is ${ visibleRatio }` ) ; const windowState = await getWindowState ( page ) ; console . log ( `windowState:\n ${ JSON . stringify ( windowState , null , 2 ) }` ) ; expect ( handle ) . toBeDefined ( ) ; expect ( visibleRatio ) . toBe ( 1 ) ; } ) ; } ) ;