@lcrespilho/playwright-utils

Functions

enableGADebug()

Simula a extensão Google Analytics Debugger (https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna), habilitando debug GA4 (gtag).

flatRequestUrl()

Returns a flattened request URL by combining the URL and postData parameters of the given Request-like object.

flatResponseUrl()

Returns a flattened request URL from Response object, by combining the URL and postData parameters of the given Response's Request object.

scrollToBottom()

Realiza scroll até o fundo da página, suavemente.

highlightLocator()

Highlights a locator on the page.

previewGTM()

Executa uma versão específica do GTM, sem abrir o Tag Assistant. Deve ser utilizada em test.beforeEach ou test.

requestMatcher()

Cria um predicado que verifica se a URL achatada da requisição corresponde ao padrão.

responseMatcher()

Cria um predicado que verifica se a URL achatada da resposta corresponde ao padrão.

requestMatcherCb()

Cria um predicado que, ao encontrar uma requisição correspondente, executa o callback e retorna true. Erros lançados pelo callback são ignorados.

responseMatcherCb()

Cria um predicado que, ao encontrar uma resposta correspondente, executa o callback e retorna true. Erros lançados pelo callback são ignorados.

enableGADebug()

Simula a extensão Google Analytics Debugger (https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna), habilitando debug GA4 (gtag).

Kind: global function

flatRequestUrl()

Returns a flattened request URL by combining the URL and postData parameters of the given Request-like object.

Kind: global function

flatResponseUrl()

Returns a flattened request URL from Response object, by combining the URL and postData parameters of the given Response's Request object.

Kind: global function

scrollToBottom()

Realiza scroll até o fundo da página, suavemente.

Kind: global function

highlightLocator()

Highlights a locator on the page.

Kind: global function
Example

const locator = page.getByRole('button', { name: 'Click Me' })
await highlightLocator(locator)

previewGTM()

Executa uma versão específica do GTM, sem abrir o Tag Assistant. Deve ser utilizada em test.beforeEach ou test.

Kind: global function
Example

test.beforeEach(async ({ context }) => {
  await previewGTM(context, 'https://tagassistant.google.com/?authuser=8&hl=en&utm_source=gtm#/?source=TAG_MANAGER&id=GTM-123123&gtm_auth=cDqGMWuJkUq73urprdYOAw&gtm_preview=env-869&cb=8635696129626987');
});

requestMatcher()

Cria um predicado que verifica se a URL achatada da requisição corresponde ao padrão.

Kind: global function
Example

const request = await page.waitForRequest(requestMatcher('/api/users'))

responseMatcher()

Cria um predicado que verifica se a URL achatada da resposta corresponde ao padrão.

Kind: global function
Example

const response = await page.waitForResponse(responseMatcher('/api/users'))

requestMatcherCb()

Cria um predicado que, ao encontrar uma requisição correspondente, executa o callback e retorna true. Erros lançados pelo callback são ignorados.

Kind: global function
Example

await page.waitForRequest(
  requestMatcherCb('/api/users', req => console.log(req.method()))
)

responseMatcherCb()

Cria um predicado que, ao encontrar uma resposta correspondente, executa o callback e retorna true. Erros lançados pelo callback são ignorados.

Kind: global function
Example

await page.waitForResponse(
  responseMatcherCb('/api/users', res => console.log(res.status()))
)

---

Como criar pacotes NPM

https://www.youtube.com/watch?v=Nh9xW2-ZOEU

Desenvolvendo

• alterar src/index.ts
• logue no npm: npm login
• gerar um pacote com npm run pack
• instalar esse pacote gerado no projeto que deseja testar a nova versão da lib: cd /caminho/projeto/; npm install /caminho/pacote.tgz
  • opcionalmente, pode-se utilizar npm link (aqui) e npm install @lcrespilho/playwright-utils (onde quiser testar). Para desfazer, o npm unlink não funciona; é necessário remover globalmente: npm uninstall -g @lcrespilho/playwright-utils

Publicando

• npm run publish-prod-{patch|minor|major} <- isso já faz tudo: bump version, builda, documenta e publica no npm.