Midscene.js com o navegador de raspagem da Bright Data

A raspagem da Web desempenha um papel importante na coleta de dados em escala, principalmente quando é essencial tomar decisões rápidas e informadas.

Neste tutorial, você aprenderá:

• O que é o Midscene.js e como ele funciona,
• As limitações do uso do Midscene.js,
• Como a Bright Data ajuda a superar esses desafios
• Como integrar o Midscene.js com o Bright Data para uma raspagem eficaz da Web

Vamos mergulhar de cabeça!

O que é o Midscene.js?

O Midscene.js é uma ferramenta de código aberto que permite automatizar as interações do navegador usando o inglês simples. Em vez de escrever scripts complexos, você pode simplesmente digitar comandos como “Clique no botão de login” ou “Digite o campo de e-mail”. Em seguida, o Midscene converte essas instruções em etapas de automação usando agentes de IA.

Ele também oferece suporte a ferramentas modernas de automação do navegador, como Puppeteer e Playwright, o que o torna especialmente útil para tarefas como testes, automação da interface do usuário e extração de sites dinâmicos.

Em detalhes, os principais recursos que ele oferece são:

• Controle de linguagem natural: Automatize tarefas usando avisos claros e em inglês, em vez de códigos.
• Integração de IA com o servidor MCP: Conecta-se a modelos de IA por meio de um servidor MCP para ajudar a gerar scripts de automação.
• Suporte integrado ao Puppeteer e ao Playwright: Atua como uma camada de alto nível sobre estruturas populares, tornando seus fluxos de trabalho fáceis de gerenciar e ampliar.
• Automação entre plataformas: Oferece suporte à Web (via Puppeteer/Playwright) e ao Android (via SDK JavaScript).
• Experiência sem código: Oferece ferramentas como a extensão Midscene do Chrome para que você possa criar automações sem escrever nenhuma linha de código.
• Projeto de API simples: Fornece uma API limpa e bem documentada para interagir com os elementos da página e extrair conteúdo com eficiência.

Limitações do uso do Midscene para automação do navegador da Web

O Midscene usa modelos de IA como GPT-4o ou Qwen para automatizar navegadores por meio de comandos de linguagem natural. Ele funciona com ferramentas como Puppeteer e Playwright, mas tem limitações importantes.

A precisão do Midscene depende da clareza de suas instruções e da estrutura subjacente da página. Solicitações vagas como “clique no botão” podem falhar se houver vários botões semelhantes. A IA se baseia em capturas de tela e layouts visuais, portanto, pequenas alterações estruturais ou rótulos ausentes podem causar erros ou cliques errados. Os prompts que funcionam em uma página da Web podem não funcionar em outra com aparência semelhante.

Para minimizar os erros, escreva instruções claras e específicas que correspondam à estrutura da página. Sempre teste os prompts com a extensão Midscene do Chrome antes de integrá-los aos scripts de automação.

Outra limitação importante é o alto consumo de recursos. Cada etapa de automação com o Midscene envia uma captura de tela e um prompt para o modelo de IA, usando muitos tokens, especialmente em páginas dinâmicas ou com muitos dados. Isso pode levar a limites de taxa da API de IA e a custos de uso mais altos à medida que o número de etapas automatizadas aumenta.

O Midscene também não pode interagir com elementos protegidos do navegador, como CAPTCHAs, iframes de origem cruzada ou conteúdo atrás de paredes de autenticação. Como resultado, não é possível fazer a raspagem de conteúdo seguro ou fechado. O Midscene é mais eficaz em sites estáticos ou moderadamente dinâmicos com conteúdo acessível e estruturado.

Por que os dados brilhantes são uma solução mais eficaz

A Bright Data é uma plataforma avançada de coleta de dados que o ajuda a criar, executar e dimensionar suas operações de raspagem da Web. Ela oferece uma infraestrutura proxy avançada, ferramentas de automação e conjuntos de dados para empresas e desenvolvedores, permitindo que você acesse, extraia e interaja com qualquer site público.

• A Bright Data oferece várias ferramentas, como a API SERP, a API Crawl, a API Browser e a API Unlocker, que permitem acessar, extrair dados e interagir comsites complexos que carregam conteúdo dinamicamente. Essas ferramentas oferecem várias ferramentas que permitem recuperar dados de qualquer plataforma, tornando-as ideais para plataformas de comércio eletrônico, viagens e imóveis.
• Infraestrutura de proxy eficiente A Bright Data oferece uma infraestrutura de proxy poderosa e flexível por meio de suas quatro redes principais: Residencial, Datacenter, ISP e Móvel. Essas redes fornecem acesso a milhões de endereços IP em todo o mundo, permitindo que os usuários coletem dados da Web de forma confiável e minimizem os bloqueios.
• Suporte a conteúdo multimídia A Bright Data permite a extração de vários tipos de conteúdo, incluindo vídeos, imagens, áudio e texto, de fontes publicamente disponíveis. Sua infraestrutura foi projetada para lidar com a coleta de mídia em grande escala e oferecer suporte a casos de uso avançados, como treinamento de modelos de visão computacional, criação de ferramentas de reconhecimento de fala e sistemas de processamento de linguagem natural.
• Fornece conjuntos de dadosprontos A Bright Data fornece conjuntos de dados prontos que são totalmente estruturados, de alta qualidade e prontos para uso. Esses conjuntos de dados abrangem uma variedade de domínios, incluindo comércio eletrônico, anúncios de emprego, imóveis e mídia social, o que os torna adequados para diferentes setores e casos de uso.

Como integrar o Midscene.js com a Bright Data

Nesta seção do tutorial, você aprenderá como extrair dados de sites usando o Midscene e a API do navegador da Bright Data e como combinar as duas ferramentas para obter melhores funcionalidades de extração da Web.

Para demonstrar isso, vamos extrair uma página da Web estática que exibe uma lista de cartões de contato de funcionários. Começaremos usando o Midscene e o Bright Data individualmente e, em seguida, integraremos ambos usando o Puppeteer para mostrar como eles podem trabalhar juntos.

Pré-requisitos

Para acompanhar este tutorial, verifique se você tem o seguinte:

• Uma conta da Bright Data.
• um editor de código, como o Visual Studio Code, Cursor, etc.
• Uma chave de API da OpenAI compatível com o modelo GPT-4o.
• Conhecimento básico da linguagem de programação JavaScript.

Se você ainda não tiver uma conta da Bright Data, não se preocupe. Nós o orientaremos sobre como criá-la nas etapas abaixo.

Etapa 1: Configuração do projeto

Abra seu terminal e execute o seguinte comando para criar uma nova pasta para seus scripts de automação:

mkdir automation-scripts
cd automation-scripts

Adicione um arquivo package.json à pasta recém-criada usando o seguinte trecho de código:

npm init -y

Altere o valor do tipo package.json de commonjs para módulo.

{
	"type": "module"
}

Em seguida, instale os pacotes necessários para ativar a execução do TypeScript e acessar a funcionalidade do Midscene.js:

npm install tsx @midscene/web --save

Em seguida, instale os pacotes Puppeteer e Dotenv.

npm install puppeteer dotenv

O Puppeteer é uma biblioteca Node.js que fornece uma API de alto nível para controlar os navegadores Chrome ou Chromium. O Dotenv permite que você armazene com segurança suas chaves de API.

Agora, todos os pacotes necessários foram instalados. Podemos começar a escrever os scripts de automação.

Etapa 2: automatizar a raspagem da Web com o Midscene.js

Antes de prosseguirmos, crie um arquivo .env dentro da pasta automation-scripts e copie a chave da API da OpenAI para o arquivo como uma variável de ambiente.

OPENAI_API_KEY=<your_openai_key>

O Midscene usa o modelo OpenAI GPT-4o para executar as tarefas de automação com base nos comandos do usuário.

Em seguida, crie um arquivo dentro da pasta.

cd automation-scripts
touch midscene.ts

Importe o Puppeteer, o Midscene Puppeteer Agent e a configuração dotenv para o arquivo:

import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";
import "dotenv/config";

Adicione o seguinte trecho de código ao arquivo midscene.ts:

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
	(async () => {
		//👇🏻 initialize puppeteer
		const browser = await puppeteer.launch({
			headless: false,
		});

		//👇🏻 set the page config
		const page = await browser.newPage();
		await page.setViewport({
			width: 1280,
			height: 800,
			deviceScaleFactor: 1,
		});

		/*
    ----------
    👉🏻 Write automation scripts here 👈🏼 
    -----------

    */
	})()
);

O trecho de código inicializa o Puppeteer dentro de uma Expressão de Função Imediatamente Invocada (IIFE) assíncrona. Essa estrutura permite que você use await no nível superior sem envolver a lógica em várias chamadas de função.

Em seguida, adicione os seguintes trechos de código dentro do IIFE:

//👇🏻 Navigates to the web page
await page.goto(
	"<https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/contacts3.html>"
);

// 👇🏻 init Midscene agent
const agent = new PuppeteerAgent(page as any);

//👇🏻 gives the AI model a query
const items = await agent.aiQuery(
	"get all the contacts details from the screen"
);

//👇🏻 Waits for 5secs
await sleep(5000);

// 👀 log the results
console.log("search result", items);

O trecho de código acima vai para o endereço da página da Web, inicializa o agente Puppeteer, recupera todos os detalhes de contato da página da Web e registra o resultado.

Etapa 3: automatizar a raspagem da Web com a API do navegador de dados Bright

Crie um arquivo brightdata.ts na pasta automation-scripts.

cd automation-scripts
touch brightdata.ts

Navegue até a página inicial da Bright Data e crie uma conta.

Selecione API do navegador em seu painel e, em seguida, insira o nome da zona e a descrição para criar uma nova API do navegador.

Em seguida, copie suas credenciais do Puppeteer e salve-as no arquivo brightdata.ts, conforme mostrado abaixo:

const BROWSER_WS = "wss://brd-customer-******";

Modifique o arquivo brightdata.ts conforme mostrado abaixo:

import puppeteer from "puppeteer";

const URL =
	"<https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/contacts3.html>";

const BROWSER_WS = "wss://brd-customer-******";

run(URL);

async function run(url: string) {
	try {
		/*
    ---------------------------
    👉🏻 Web automation workflow 👈🏼
    ---------------------------
    */
    
    //👇🏻 close the browser
    await browser.close();

	} catch (err) {
		console.error("Error fetching data");
	}
}

O trecho de código declara uma variável para o URL da página da Web e a credencial da API do navegador da Bright Data e, em seguida, declara uma função que aceita o URL como parâmetro.

Adicione o seguinte trecho de código no espaço reservado para o fluxo de trabalho de automação da Web:

//👇🏻 connect to Bright Data Browser API
console.log("Connecting to browser...");
const browser = await puppeteer.connect({
	browserWSEndpoint: BROWSER_WS,
});

console.log("Connected! Navigate to site...");
const page = await browser.newPage();

//👇🏻 Go to webpage
await page.goto(url, { waitUntil: "domcontentloaded", timeout: 60000 });
console.log("Navigated! Waiting for popup...");

O trecho de código abaixo conecta o Puppeteer ao Bright Data Browser usando o ponto de extremidade WebSocket da API. Depois que a conexão é estabelecida, ele abre uma nova página do navegador e navega até o URL passado para a função run().

Por fim, recupere os dados na página da Web usando seletores CSS com o seguinte trecho de código:

//👇🏻 Get contact details using CSS attribute
const contacts = await page.evaluate(() => {
	const cards = document.querySelectorAll("#contactsGrid .contact-card");
	return Array.from(cards).map((card) => {
		const nameEl = card.querySelector(".contact-name");
		const detailsEl = card.querySelectorAll(
			".contact-details .detail-item span:not(.detail-icon)"
		);
		const metaEl = card.querySelector(".contact-meta");
		if (!nameEl || !detailsEl.length || !metaEl) {
			return null; // Skip if any required element is missing
		}

		const contact = {
			name:
				(nameEl as HTMLElement)?.dataset.name ||
				(nameEl as HTMLElement)?.innerText.trim() ||
				null,
			jobTitle: (metaEl as HTMLElement)?.innerText.trim() || null,
			phone: (detailsEl[0] as HTMLElement)?.innerText.trim() || null,
			email: (detailsEl[1] as HTMLElement)?.innerText.trim() || null,
			company: (detailsEl[2] as HTMLElement)?.innerText.trim() || null,
			address: (detailsEl[3] as HTMLElement)?.innerText.trim() || null,
			lastContact: (detailsEl[4] as HTMLElement)?.innerText.trim() || null,
		};

		return contact;
	});
});

console.log("Contacts grid found! Extracting data...", contacts);

O trecho de código acima percorre cada cartão de contato na página da Web e extrai os principais detalhes, como nome, cargo, número de telefone, endereço de e-mail, empresa, endereço e data do último contato.

Aqui está o script de automação completo:

import puppeteer from "puppeteer";

const URL =
	"<https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/contacts3.html>";
const BROWSER_WS ="wss://brd-customer-*******";

run(URL);

async function run(url: string) {
	try {

		//👇🏻 connect to Bright data Browser API
		console.log("Connecting to browser...");
		const browser = await puppeteer.connect({
			browserWSEndpoint: BROWSER_WS,
		});

		console.log("Connected! Navigate to site...");
		const page = await browser.newPage();

		//👇🏻 Go to webpage
		await page.goto(url, { waitUntil: "domcontentloaded", timeout: 60000 });
		console.log("Navigated! Waiting for popup...");

		//👇🏻 Get contact details using CSS attribute
		const contacts = await page.evaluate(() => {
			const cards = document.querySelectorAll("#contactsGrid .contact-card");
			return Array.from(cards).map((card) => {
				const nameEl = card.querySelector(".contact-name");
				const detailsEl = card.querySelectorAll(
					".contact-details .detail-item span:not(.detail-icon)"
				);
				const metaEl = card.querySelector(".contact-meta");
				if (!nameEl || !detailsEl.length || !metaEl) {
					return null; // Skip if any required element is missing
				}

				const contact = {
					name: (nameEl as HTMLElement)?.dataset.name || (nameEl as HTMLElement)?.innerText.trim() || null,
					jobTitle: (metaEl as HTMLElement)?.innerText.trim() || null,
					phone: (detailsEl[0] as HTMLElement)?.innerText.trim() || null, 
					email: (detailsEl[1] as HTMLElement)?.innerText.trim() || null,
					company: (detailsEl[2] as HTMLElement)?.innerText.trim() || null,
					address: (detailsEl[3] as HTMLElement)?.innerText.trim() || null,
					lastContact: (detailsEl[4] as HTMLElement)?.innerText.trim() || null,
						
				};

				return contact;
			});
		});

		console.log("Contacts grid found! Extracting data...", contacts);

		//👇🏻 close the browser
		await browser.close();
	} catch (err) {
		console.error("Error fetching data");
	}
}

Etapa 4: Scripts de automação de IA com Midscene e Bright Data

A Bright Data oferece suporte à automação da Web com agentes de IA por meio da integração com o Midscene. Como ambas as ferramentas são compatíveis com o Puppeteer, a combinação delas permite que você escreva fluxos de trabalho de automação simples com tecnologia de IA. Crie um arquivo combine.ts e copie o seguinte trecho de código para o arquivo:

import { PuppeteerAgent } from "@midscene/web/puppeteer";
import puppeteer from "puppeteer";
import "dotenv/config";

const URL =
	"<https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/contacts3.html>";
const BROWSER_WS = "wss://brd-customer-******";

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
	(async () => {
		/*
    		---------------------------
    		👉🏻 Web automation workflow 👈🏼
   			 ---------------------------
   		 */

		//👇🏻 close the browser
		await browser.close();
	})()
);

O trecho de código acima cria uma IIFE (Immediately Invoked Function Expression, expressão de função invocada imediatamente) assíncrona e inclui uma função sleep que permite adicionar atrasos no script de automação de IA.

Em seguida, adicione o seguinte trecho de código ao espaço reservado para o fluxo de trabalho de automação da Web:

//👇🏻 connect to Bright Data Browser API
console.log("Connecting to browser...");
const browser = await puppeteer.connect({
	browserWSEndpoint: BROWSER_WS,
});

//👇🏻 declares page
console.log("Connected! Navigate to site...");
const page = await browser.newPage();

//👇🏻 Go to website
await page.goto(URL, { waitUntil: "domcontentloaded", timeout: 60000 });

// 👀 init Midscene agent
const agent = new PuppeteerAgent(page as any);

// 👇🏻 get contact details using AI agent
const items = await agent.aiQuery(
	"get all the contacts details from the screen"
);

//👇🏻 delays for 5secs
await sleep(5000);

//👇🏻 logs the result
console.log("search result", items);

O snippet de código inicializa o Puppeteer e seu agente para navegar até a página da Web, buscar todos os detalhes de contato e registrar os resultados no console. Isso mostra como você pode integrar o agente de IA do Puppeteer com a API do Bright Data Browser para contar com os comandos claros que o Midscene fornece.

Etapa #5: Juntando tudo

Na seção anterior, você aprendeu como integrar o Midscene com a API do Bright Data Browser. O script de automação completo é mostrado abaixo:

import { PuppeteerAgent } from "@midscene/web/puppeteer";
import puppeteer from "puppeteer";
import "dotenv/config";

const URL =
	"<https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/contacts3.html>";
const BROWSER_WS = "wss://brd-customer-*****";

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
	(async () => {
		//👇🏻 connect to Bright Data Browser API
		console.log("Connecting to browser...");
		const browser = await puppeteer.connect({
			browserWSEndpoint: BROWSER_WS,
		});

		console.log("Connected! Navigate to site...");
		const page = await browser.newPage();

		//👇🏻 Go to Booking.com
		await page.goto(URL, { waitUntil: "domcontentloaded", timeout: 60000 });

	
		// 👀 init Midscene agent
		const agent = new PuppeteerAgent(page as any);

		const items = await agent.aiQuery(
			"get all the contacts details from the screen"
		);

		await sleep(5000);

		console.log("search result", items);

		await browser.close();
	})()
);

Execute o seguinte trecho de código em seu terminal para executar o script:

npx tsx combine.ts

O trecho de código acima executa o script de automação e registra os detalhes do contato no console.

 [
  {
    name: 'Alice Johnson',
    jobTitle: 'Senior Software Engineer',
    phone: '+1 (555) 123-4567',
    email: '[email protected]',
    company: 'TechCorp Innovation - Engineering',
    address: '123 Tech Street, San Francisco...',
    lastContact: 'Last contact: 2025-05-15'
  },
  {
    name: 'Bob Wilson',
    jobTitle: 'UI/UX Designer',
    phone: '+1 (555) 234-5678',
    email: '[email protected]',
    company: 'Creative Design Studio - Product',
    address: '456 Design Ave, New York, NY...',
    lastContact: 'Last contact: 2025-05-20'
  },
  {
    name: 'Carol Davis',
    jobTitle: 'Sales Director',
    phone: '+1 (555) 345-6789',
    email: '[email protected]',
    company: 'Sales Force Solutions - Sales',
    address: '789 Business Blvd, Chicago, IL...',
    lastContact: 'Last contact: 2025-06-01'
  },
  {
    name: 'David Brown',
    jobTitle: 'Marketing Manager',
    phone: '+1 (555) 456-7890',
    email: '[email protected]',
    company: 'Marketing Solutions Inc - Marketing',
    address: '321 Market St, Austin, TX...',
    lastContact: 'Last contact: 2025-05-25'
  },
  {
    name: 'Emma Taylor',
    jobTitle: 'HR Manager',
    phone: '+1 (555) 567-8901',
    email: '[email protected]',
    company: 'HR Expert Solutions - Human Resources',
    address: '654 Corporate Way, Seattle, WA...',
    lastContact: 'Last contact: 2025-05-30'
  }
]

Etapa #6: Próximas etapas

Este tutorial mostra o que é possível quando você integra o Midscene com a API do Bright Data Browser. Você pode aproveitar essa base para automatizar fluxos de trabalho mais complexos.

Ao combinar as duas ferramentas, você pode executar tarefas de automação de navegador eficientes e dimensionáveis, como:

• Extração de dados estruturados de sites dinâmicos ou com muito JavaScript
• Automatizar o envio de formulários para testes ou coleta de dados
• Navegar em sites e interagir com elementos usando instruções de linguagem natural
• Execução de trabalhos de extração de dados em grande escala com gerenciamento de proxy e manipulação de CAPTCHA

Conclusão

Até agora, você aprendeu a automatizar os processos de raspagem da Web usando o Midscene e a API do Bright Data Browser e a usar as duas ferramentas para raspar sites por meio de agentes de IA.

O Midscene depende muito dos modelos de IA para automação do navegador, e usá-lo com o Bright Data Scraping Browser significa reduzir as linhas de código com recursos eficazes de raspagem da Web. A API do navegador é apenas um exemplo de como as ferramentas e os serviços da Bright Data podem capacitar a automação avançada orientada por IA.

Registre-se agora para explorar todos os produtos.