Entendo que você está se referindo a **”slots” em testes com Playwright (PG)**. Vou explicar como testar componentes com slots, especialmente em frameworks como Vue, React ou Web Components.
## Testando Slots com Playwright
### 1. **Componentes Vue com Slots**
“`javascript
// Componente Vue com slot
// MyComponent.vue
“`
### 2. **Testes Playwright para Slots**
“`typescript
// tests/my-component.spec.ts
import { test, expect } from ‘@playwright/test’;
test.describe(‘Testando componente com slots’, () => {
test(‘slot padrão’, async ({ page }) => {
await page.goto(‘/my-component’);
// Verificar slot padrão
const defaultSlot = page.locator(‘.my-component main’);
await expect(defaultSlot).toContainText(‘Conteúdo padrão’);
// Ou se o slot foi substituído
await expect(defaultSlot).toContainText(‘Meu conteúdo customizado’);
});
test(‘slot nomeado’, async ({ page }) => {
await page.goto(‘/my-component’);
// Verificar slot nomeado
const headerSlot = page.locator(‘.my-component header’);
await expect(headerSlot).toContainText(‘Header customizado’);
const footerSlot = page.locator(‘.my-component footer’);
await expect(footerSlot).toContainText(‘Footer customizado’);
});
test(‘slot vazio’, async ({ page }) => {
await page.goto(‘/my-component-empty’);
// Verificar se slot padrão aparece quando vazio
const defaultSlot = page.locator(‘.my-component main’);
await expect(defaultSlot).toContainText(‘Conteúdo padrão’);
});
});
“`
### 3. **Testando Slots Dinâmicos**
“`typescript
test(‘slots dinâmicos’, async ({ page }) => {
await page.goto(‘/dynamic-slots’);
// Interagir com componente que altera slots
await page.click(‘#change-slot-button’);
// Verificar mudança no slot
const updatedSlot = page.locator(‘.dynamic-slot’);
await expect(updatedSlot).toContainText(‘Novo conteúdo’);
// Verificar atributos em elementos do slot
const slottedElement = page.locator(‘.my-component ::slotted(.custom-class)’);
await expect(slottedElement).toHaveAttribute(‘data-test’, ‘value’);
});
“`
### 4. **Seletores Específicos para Slots**
“`typescript
// Para Web Components com Shadow DOM
test(‘slots em Web Components’, async ({ page }) => {
await page.goto(‘/web-component’);
// Acessar elementos dentro do slot
const slotContent = page.locator(‘my-wc::shadow-dom >>> slot[name=”content”]’);
await expect(slotContent).toBeVisible();
// Ou usando pierce para Shadow DOM
const slottedItem = page.locator(‘my-wc >> ::slotted(li)’);
await expect(slottedItem).toHaveCount(3);
});
“`
### 5. **Melhores Práticas**
“`typescript
// 1. Use data-testid para elementos de slot
test(‘usando data-testid’, async ({ page }) => {
await page.goto(‘/component’);
const slotContainer = page.locator(‘[data-testid=”slot-container”]’);
const slottedContent = slotContainer.locator(‘[data-testid=”slotted-item”]’);
await expect(slottedContent).toBeVisible();
});
// 2. Teste fallback de slots
test(‘fallback de slot’, async ({ page }) => {
await page.goto(‘/component-without-slot’);
const fallbackContent = page.locator(‘.fallback-content’);
await expect(fallbackContent).toBeVisible();
await expect(fallbackContent).toContainText(‘Conteúdo padrão’);
});
// 3. Teste múltiplos slots
test(‘múltiplos slots’, async ({ page }) => {
await page.goto(‘/multi-slot’);
const slots = page.locator(‘.slot-item’);
await expect(slots).toHaveCount(3);
// Verificar ordem dos slots
const firstSlot = slots.first();
await expect(firstSlot).toContainText(‘Primeiro’);
});
“`
### 6. **Exemplo Completo**
“`typescript
import { test, expect } from ‘@playwright/test’;
test.describe(‘Testes abrangentes de slots’, () => {
test.beforeEach(async ({ page }) => {
await page.goto(‘/my-app’);
});
test(‘renderização completa com slots’, async ({ page }) => {
// Setup: montar componente com slots
await page.evaluate(() => {
document.body.innerHTML = `
Título Customizado
`;
});
// Asserts
await expect(page.locator(‘my-component ::slotted([slot=”header”])’))
.toContainText(‘Título Customizado’);
await expect(page.locator(‘my-component ::slotted(.content)’))
.toBeVisible();
await expect(page.locator(‘my-component ::slotted(button)’))
.toBeEnabled();
});
test(‘interação com elementos slotted’, async ({ page }) => {
// Clicar em botão dentro do slot
await page.locator(‘my-component ::slotted(button)’).click();
// Verificar resultado da interação
await expect(page.locator(‘.result-message’))
.toContainText(‘Ação realizada’);
});
});
“`
### 7. **Dicas para Debug**
“`typescript
// Debug visual
test(‘debug slots’, async ({ page }) => {
await page.goto(‘/component’);
// 1. Tirar screenshot
await page.screenshot({ path: ‘slot-rendering.png’ });
// 2. Verificar HTML gerado
const html = await page.locator(‘my-component’).innerHTML();
console.log(‘HTML do componente:’, html);
// 3. Usar pause para inspecionar
await page.pause();
// 4. Verificar se slots estão no DOM
const isSlotRendered = await page.locator(‘slot’).count();
expect(isSlotRendered).toBeGreaterThan(0);
});
“`
### 8. **Configuração do Playwright**
“`typescript
// playwright.config.ts
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
testDir: ‘./tests’,
use: {
// Configurações para testar Shadow DOM
launchOptions: {
args: [‘–disable-web-security’] // Para testar cross-origin
}
}
});
“`
## Pontos Importantes:
1. **Shadow DOM**: Use `>>>` ou `::shadow` para acessar Shadow DOM
2. **Seletores**: `::slotted()` é útil para elementos dentro de slots
3. **Performance**: Evite seletores muito complexos
4. **Responsividade**: Teste slots em diferentes viewports
Precisa de ajuda com algum caso específico de teste de slots?
