<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Português on Daniel Bonam</title><link>https://bonam.cc/tags/portugu%C3%AAs/</link><description>Recent content in Português on Daniel Bonam</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><lastBuildDate>Mon, 13 Apr 2026 12:01:01 +0000</lastBuildDate><atom:link href="https://bonam.cc/tags/portugu%C3%AAs/index.xml" rel="self" type="application/rss+xml"/><item><title>FIWARE: o coração das cidades inteligentes</title><link>https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/</link><pubDate>Mon, 13 Apr 2026 12:01:01 +0000</pubDate><guid>https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/</guid><description>&lt;img src="https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/01-1-wmcb-z3c5vqbue8rurtl4g.png" alt="Featured image of post FIWARE: o coração das cidades inteligentes" /&gt;&lt;h2 id="o-que-éfiware"&gt;O que é FIWARE&#10;&lt;/h2&gt;&lt;p&gt;FIWARE é uma plataforma open source que fornece componentes padronizados para acelerar o desenvolvimento de aplicações no contexto de recursos e serviços inteligentes.&lt;/p&gt;&#10;&lt;p&gt;Nascido em 2011 como iniciativa da Comissão Europeia em parceria com grandes empresas de tecnologia, o ecossistema FIWARE hoje está presente em cidades, fazendas, indústrias, portos, redes de energia e diversos outros domínios que dependem de dados em tempo real.&lt;/p&gt;&#10;&lt;p&gt;Em uma cidade inteligente, o FIWARE atua como um “cérebro” que integra dados de trânsito, estacionamento, iluminação, meio ambiente e segurança em uma visão unificada de contexto em tempo real. Em vez de cada sistema viver em um silo, tudo passa a conversar pela mesma linguagem, abrindo espaço para decisões mais rápidas e serviços públicos mais inteligentes.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="932px" data-flex-grow="388" height="114" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/02-0-klubimuoqnxhrczc.png" width="443"&gt;&lt;/p&gt;&#10;&lt;h3 id="como-a-fiware-enxerga-acidade"&gt;Como a FIWARE enxerga a cidade&#10;&lt;/h3&gt;&lt;p&gt;Para a plataforma FIWARE, uma cidade (ou qualquer outro ambiente inteligente) é quebrada em abstrações. Cada parte do mundo real vira um elemento de contexto digital que pode ser consultado e atualizado em tempo real.&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;Entidades:&lt;/strong&gt; representam elementos da cidade, como vagas de estacionamento, postes de iluminação, ônibus, lixeiras, sensores e assim por diante. Cada um desses elementos físicos tem uma “cópia digital” dentro da plataforma, chamada de entidade.&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;Atributos:&lt;/strong&gt; descrevem o estado dessas entidades. Uma vaga pode ter atributos como ocupada/livre; um poste pode ter atributos como intensidade de luz e consumo de energia. Em resumo, os atributos são as informações que caracterizam cada entidade em um dado momento.&lt;/li&gt;&#10;&lt;li&gt;**Verticais: **são grandes domínios de negócio onde as entidades são organizadas, como mobilidade, iluminação pública, segurança, meio ambiente, energia, saneamento etc. Cada vertical tem seus próprios tipos de entidade, mas todas compartilham a mesma linguagem de contexto.&lt;/li&gt;&#10;&lt;li&gt;**Contexto: **é a representação digital do estado atual dessas entidades. De forma simples, é a “fotografia do momento” da cidade, vista através dos seus objetos digitais.&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;Dessa forma, o FIWARE consegue abstrair elementos reais da cidade em um modelo de contexto padronizado. Isso permite que diferentes soluções e fornecedores enxerguem a mesma realidade urbana sem depender de um único sistema proprietário.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="393px" data-flex-grow="163" height="458" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/03-0-kmaflcgk5vre0afm.jpg" width="750"&gt;&lt;/p&gt;&#10;&lt;h2 id="a-arquitetura-fiware"&gt;A arquitetura FIWARE&#10;&lt;/h2&gt;&lt;p&gt;Em relação à arquitetura, o FIWARE não é um sistema único; ele é um conjunto de componentes que, combinados, formam uma plataforma inteligente. Assim, cada solução usa apenas os blocos necessários para o seu caso de uso, sempre construídos em torno de um elemento central chamado &lt;em&gt;Context Broker&lt;/em&gt;.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="423px" data-flex-grow="176" height="580" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/04-0-wqfe2rcw7cusyub2.png" srcset="https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/04-0-wqfe2rcw7cusyub2_hu_8e066d35f63358e6.png 800w, https://bonam.cc/p/fiware-o-coracao-das-cidades-inteligentes/04-0-wqfe2rcw7cusyub2.png 1024w" width="1024"&gt;&lt;/p&gt;&#10;&lt;h3 id="context-broker-o-núcleo-da-plataforma"&gt;Context Broker: o núcleo da plataforma&#10;&lt;/h3&gt;&lt;p&gt;O Context Broker é o componente responsável por manter e disponibilizar o contexto em tempo real, ou seja, o estado atualizado das entidades que representam a cidade. É ele que expõe a API de contexto para criação, atualização, consulta e assinatura de mudanças, servindo como ponto central de integração entre todos os outros blocos.&lt;/p&gt;&#10;&lt;h3 id="generic-enablers-blocos-construídos-ao-redor-docontexto"&gt;Generic Enablers: blocos construídos ao redor do contexto&#10;&lt;/h3&gt;&lt;p&gt;Ao redor do Context Broker, o FIWARE oferece diversos componentes chamados &lt;em&gt;Generic Enablers&lt;/em&gt;. Eles ampliam as capacidades da plataforma, permitindo integrar dispositivos e sensores por meio de conectores voltados para IoT, processar e armazenar dados para historização, análise e geração de insights, além de cuidar de identidade, autenticação e autorização para proteger APIs e recursos da cidade.&lt;/p&gt;&#10;&lt;h3 id="aplicações-e-sistemas-consumindo-ocontexto"&gt;Aplicações e sistemas consumindo o contexto&#10;&lt;/h3&gt;&lt;p&gt;Com essa base, aplicações web e mobile, dashboards operacionais, plataformas de dados abertos e até sistemas legados da cidade podem consumir o contexto exposto pelo FIWARE. A partir daí, cada time ou fornecedor consegue construir serviços inteligentes em cima da mesma visão de cidade, sem precisar reinventar a camada de integração.&lt;/p&gt;&#10;&lt;h2 id="conclusão"&gt;Conclusão&#10;&lt;/h2&gt;&lt;p&gt;FIWARE nasce como uma resposta concreta ao caos de sistemas isolados que existe em muitas cidades: em vez de cada solução viver no seu próprio mundo, a plataforma propõe uma linguagem comum de contexto e um núcleo bem definido, o Context Broker, em torno do qual tudo se conecta.&lt;/p&gt;&#10;&lt;p&gt;Ao representar a cidade em entidades e atributos padronizados e oferecer blocos plugáveis para IoT, dados e segurança, o FIWARE cria uma base sólida para que diferentes equipes, fornecedores e startups construam serviços inteligentes em cima da mesma visão de realidade urbana.&lt;/p&gt;&#10;&lt;p&gt;O FIWARE funciona como uma linguagem comum para inúmeros sistemas, permitindo que eles finalmente trabalhem juntos na construção do futuro conectado das cidades inteligentes.&lt;/p&gt;&#10;</description></item><item><title>Dando acesso do meu navegador para uma IA (Testes E2E com Playwright MCP)</title><link>https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/</link><pubDate>Wed, 02 Jul 2025 00:38:59 +0000</pubDate><guid>https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/</guid><description>&lt;img src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/01-1-gseuzw2va4g5zpj5o8ecdg.png" alt="Featured image of post Dando acesso do meu navegador para uma IA (Testes E2E com Playwright MCP)" /&gt;&lt;p&gt;Um dos maiores desafios no desenvolvimento de software de qualidade é garantir que tudo continue funcionando como esperado, mesmo com mudanças constantes no código. É aí que entram os testes End to End. Eles ajudam a validar se sua aplicação está se comportando corretamente a partir do ponto de vista do usuário.&lt;/p&gt;&#10;&lt;p&gt;Os testes E2E são ótimos para encontrar bugs porque simulam interações reais de usuários. Eles conseguem detectar problemas que testes unitários ou de integração podem deixar passar, como falhas na interface, problemas de navegação ou fluxos de usuário quebrados.&lt;/p&gt;&#10;&lt;p&gt;Mas sejamos honestos: testar E2E nem sempre é um mar de rosas. Esses testes podem ser lentos, frágeis e difíceis de manter. Escrevê-los e mantê-los pode ser um sofrimento, especialmente em aplicações que mudam com frequência ou que não têm uma base sólida de testes.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="426px" data-flex-grow="177" height="360" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/02-0-zrarul1oe6y0y0oa.gif" width="640"&gt;&lt;/p&gt;&#10;&lt;p&gt;É aí que a &lt;strong&gt;IA&lt;/strong&gt; pode ajudar. Ela pode auxiliar na geração e manutenção de testes E2E, te deixando livre para focar em criar cenários de teste relevantes que cobrem caminhos críticos.&lt;/p&gt;&#10;&lt;p&gt;Neste artigo, vamos explorar como usar &lt;strong&gt;IA com o Playwright&lt;/strong&gt; para gerar código de teste E2E. Você escreve os cenários de teste e a IA cuida da implementação.&lt;/p&gt;&#10;&lt;h2 id="playwright-mcp"&gt;Playwright + MCP&#10;&lt;/h2&gt;&lt;h3 id="o-que-é-o-playwright"&gt;O que é o Playwright?&#10;&lt;/h3&gt;&lt;p&gt;&lt;a class="link" href="https://playwright.dev" target="_blank" rel="noopener"&#10; &gt;Playwright&lt;/a&gt; é uma biblioteca open-source para automação de navegadores. Ele permite que você interaja com páginas da web, preencha formulários, clique em botões e execute outras ações , exatamente como um usuário real. O Playwright suporta vários navegadores (Chromium, Firefox, WebKit) e funciona com JavaScript, TypeScript, Python, Java e .NET.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="225" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/03-1-uzg52dwbln4pghflpw-dwq.png" width="225"&gt;&lt;/p&gt;&#10;&lt;p&gt;Você pode usá-lo para simular interações de usuário e verificar o comportamento da sua aplicação através de testes automatizados.&lt;/p&gt;&#10;&lt;h3 id="e-o-que-émcp"&gt;E o que é MCP?&#10;&lt;/h3&gt;&lt;p&gt;MCP (Model Context Protocol) é um protocolo que fornece uma forma padronizada de interagir com modelos de IA. Ele permite enviar requisições e receber respostas de sistemas de IA, abstraindo a complexidade da implementação por trás.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="200" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/04-0-aoyq-biwsijfzrcq.png" width="200"&gt;&lt;/p&gt;&#10;&lt;p&gt;Pense nele como uma API para agentes de IA, onde você define quais ferramentas ele pode usar.&lt;/p&gt;&#10;&lt;h3 id="os-doisjuntos"&gt;Os dois juntos&#10;&lt;/h3&gt;&lt;p&gt;O Playwright permite automação de navegador. O MCP permite integração fluida com IA. Juntos, eles permitem que você gere cenários e códigos de teste usando IA, dando ao modelo o poder de explorar e testar sua aplicação como um humano de verdade.&lt;/p&gt;&#10;&lt;h3 id="setup"&gt;Setup&#10;&lt;/h3&gt;&lt;p&gt;Vamos configurar nosso projeto para usar o Playwright com MCP. Vamos instalar as dependências, configurar o ambiente e preparar tudo para escrever testes gerados por IA.&lt;/p&gt;&#10;&lt;h3 id="pré-requisitos"&gt;Pré-requisitos&#10;&lt;/h3&gt;&lt;ul&gt;&#10;&lt;li&gt;Node.js instalado&lt;/li&gt;&#10;&lt;li&gt;Um editor de código (por exemplo, VS Code ou Cursor)&lt;/li&gt;&#10;&lt;li&gt;Copilot instalado e configurado&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h3 id="instale-e-configure-o-playwright"&gt;Instale e configure o Playwright&#10;&lt;/h3&gt;&lt;p&gt;Crie um novo projeto Node.js:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;npm init -y&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;Instale o Playwright:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;span class="lnt"&gt;2&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;npm install -D @playwright/test&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;npx playwright install&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;Configure o MCP no VS Code&lt;/p&gt;&#10;&lt;p&gt;Crie um arquivo &lt;code&gt;.vscode/mcp.json&lt;/code&gt; com o seguinte conteúdo:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt; 1&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 2&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 3&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 4&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 5&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 6&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 7&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 8&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 9&#10;&lt;/span&gt;&lt;span class="lnt"&gt;10&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;servers&amp;#34;: {&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;playwright&amp;#34;: {&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;command&amp;#34;: &amp;#34;npx&amp;#34;,&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;args&amp;#34;: [&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;@playwright/mcp@latest&amp;#34;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; ]&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;}&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;Depois, crie um arquivo de prompt chamado &lt;code&gt;generate-tests.prompt.md&lt;/code&gt; com este conteúdo:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt; 1&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 2&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 3&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 4&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 5&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 6&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 7&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 8&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 9&#10;&lt;/span&gt;&lt;span class="lnt"&gt;10&#10;&lt;/span&gt;&lt;span class="lnt"&gt;11&#10;&lt;/span&gt;&lt;span class="lnt"&gt;12&#10;&lt;/span&gt;&lt;span class="lnt"&gt;13&#10;&lt;/span&gt;&lt;span class="lnt"&gt;14&#10;&lt;/span&gt;&lt;span class="lnt"&gt;15&#10;&lt;/span&gt;&lt;span class="lnt"&gt;16&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-gdscript3" data-lang="gdscript3"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;---&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;tools&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;playwright&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;mode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;agent&amp;#39;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;---&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;You&lt;/span&gt; &lt;span class="n"&gt;are&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="n"&gt;playwright&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;generator&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;You&lt;/span&gt; &lt;span class="n"&gt;are&lt;/span&gt; &lt;span class="n"&gt;given&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="n"&gt;scenario&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;you&lt;/span&gt; &lt;span class="n"&gt;need&lt;/span&gt; &lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="n"&gt;generate&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="n"&gt;playwright&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;it&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;DO&lt;/span&gt; &lt;span class="n"&gt;NOT&lt;/span&gt; &lt;span class="n"&gt;generate&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;code&lt;/span&gt; &lt;span class="n"&gt;based&lt;/span&gt; &lt;span class="n"&gt;on&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;scenario&lt;/span&gt; &lt;span class="n"&gt;alone&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;DO&lt;/span&gt; &lt;span class="n"&gt;run&lt;/span&gt; &lt;span class="n"&gt;steps&lt;/span&gt; &lt;span class="n"&gt;one&lt;/span&gt; &lt;span class="n"&gt;by&lt;/span&gt; &lt;span class="n"&gt;one&lt;/span&gt; &lt;span class="n"&gt;using&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;tools&lt;/span&gt; &lt;span class="n"&gt;provided&lt;/span&gt; &lt;span class="n"&gt;by&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;Playwright&lt;/span&gt; &lt;span class="n"&gt;MCP&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;When&lt;/span&gt; &lt;span class="n"&gt;asked&lt;/span&gt; &lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="n"&gt;explore&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="n"&gt;website&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="mf"&gt;1.&lt;/span&gt; &lt;span class="n"&gt;Navigate&lt;/span&gt; &lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;specified&lt;/span&gt; &lt;span class="n"&gt;URL&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="mf"&gt;2.&lt;/span&gt; &lt;span class="n"&gt;Explore&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="n"&gt;key&lt;/span&gt; &lt;span class="n"&gt;functionality&lt;/span&gt; &lt;span class="n"&gt;of&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;site&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;when&lt;/span&gt; &lt;span class="n"&gt;finished&lt;/span&gt; &lt;span class="n"&gt;close&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;browser&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="mf"&gt;3.&lt;/span&gt; &lt;span class="n"&gt;Implement&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="n"&gt;Playwright&lt;/span&gt; &lt;span class="n"&gt;TypeScript&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;that&lt;/span&gt; &lt;span class="n"&gt;uses&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="n"&gt;playwright&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;based&lt;/span&gt; &lt;span class="n"&gt;on&lt;/span&gt; &lt;span class="n"&gt;message&lt;/span&gt; &lt;span class="n"&gt;history&lt;/span&gt; &lt;span class="n"&gt;using&lt;/span&gt; &lt;span class="n"&gt;Playwright&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;s best practices including role based locators, auto retrying assertions and with no added timeouts unless necessary as Playwright has built in retries and autowaiting if the correct locators and assertions are used.&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;Save&lt;/span&gt; &lt;span class="n"&gt;generated&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;file&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;tests&lt;/span&gt; &lt;span class="n"&gt;directory&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;Execute&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;file&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;iterate&lt;/span&gt; &lt;span class="n"&gt;until&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt; &lt;span class="n"&gt;passes&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;Include&lt;/span&gt; &lt;span class="n"&gt;appropriate&lt;/span&gt; &lt;span class="n"&gt;assertions&lt;/span&gt; &lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="n"&gt;verify&lt;/span&gt; &lt;span class="n"&gt;the&lt;/span&gt; &lt;span class="n"&gt;expected&lt;/span&gt; &lt;span class="n"&gt;behavior&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;&lt;em&gt;Pronto! Tudo configurado&lt;/em&gt;&lt;/p&gt;&#10;&lt;h2 id="escrevendo-testes-comia"&gt;Escrevendo Testes com IA&#10;&lt;/h2&gt;&lt;p&gt;Com tudo configurado, você está pronto para escrever testes com ajuda da IA.&lt;/p&gt;&#10;&lt;p&gt;Abra o Copilot Chat no seu editor VS Code e peça para explorar um site, como:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;Explore https://google.com&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;O Copilot confirmará antes de executar o comando. Clique em “Sim” e ele abrirá o navegador.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="455px" data-flex-grow="189" height="720" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/05-1-bdzksmsvulhvwwvcfyjyna.png" srcset="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/05-1-bdzksmsvulhvwwvcfyjyna_hu_29e3375086b26e91.png 800w, https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/05-1-bdzksmsvulhvwwvcfyjyna.png 1366w" width="1366"&gt;&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="455px" data-flex-grow="189" height="720" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/06-1-kfcqkknlakx-aqj7hb8xeg.png" srcset="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/06-1-kfcqkknlakx-aqj7hb8xeg_hu_6328d18fa419810f.png 800w, https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/06-1-kfcqkknlakx-aqj7hb8xeg.png 1366w" width="1366"&gt;&lt;/p&gt;&#10;&lt;p&gt;Com o navegador aberto, descreva as ações que você deseja que ele realize:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;Clique no campo de busca, digite &amp;#34;Playwright&amp;#34; e pressione Enter. Depois, clique na aba &amp;#39;Notícias&amp;#39; para ver as atualizações mais recentes.&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="455px" data-flex-grow="189" height="720" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/07-1-jkrzbvjtqqc0mja4afm-5a.gif" width="1366"&gt;&lt;/p&gt;&#10;&lt;p&gt;Após realizar os passos, peça para gerar o teste:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;Gere um teste Playwright baseado nas ações realizadas.&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;A IA irá gerar e salvar o arquivo de teste, pronto para execução!&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="455px" data-flex-grow="189" height="720" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/08-1-srdqhh0wckubyhq-jidzlg.gif" width="1366"&gt;&lt;/p&gt;&#10;&lt;h2 id="conclusão"&gt;Conclusão&#10;&lt;/h2&gt;&lt;p&gt;Neste artigo, vimos como usar IA para criar testes de ponta a ponta com Playwright e MCP. Configuramos o ambiente, instalamos as ferramentas necessárias e passamos pelo processo de escrita de testes com ajuda da IA.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="455px" data-flex-grow="189" height="719" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/09-1-3izghufr1sfkdf1gopjqdg.gif" width="1365"&gt;&lt;/p&gt;&#10;&lt;p&gt;Claro, a IA não é perfeita. Ela pode gerar código incorreto ou incompleto. Por isso, sempre revise e valide o que foi gerado antes de confiar totalmente. Mas como ponto de partida, é extremamente útil e pode economizar horas de trabalho manual.&lt;/p&gt;&#10;&lt;p&gt;&lt;img class="gallery-image" data-flex-basis="240px" data-flex-grow="100" height="220" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://bonam.cc/p/dando-acesso-do-meu-navegador-para-uma-ia-testes-e2e-com-playwright-mcp/10-0-n-4ou0fd-n-rr84.gif" width="220"&gt;&lt;/p&gt;&#10;&lt;p&gt;E lembre-se: a IA é uma &lt;strong&gt;ferramenta&lt;/strong&gt; para engenheiros de QA, não um &lt;strong&gt;substituto&lt;/strong&gt;. Ela te ajuda a ir mais rápido, mas a qualidade ainda depende do julgamento humano.&lt;/p&gt;&#10;</description></item></channel></rss>