Multi Environments

This is a multi-environment example that contains three environments called dev , pre , and prod .

Type hints

Config to xbell-env.d.ts lets you get typescript hints.

xbell-env.d.ts

interface XBellProjects {
  name: 'dev' | 'pre' | 'prod';
  data: {
    origin: string;
  }
}

Config

xbell.config.ts

import type { XBellConfig } from 'xbell';

const config: XBellConfig = {
  browser: {
    headless: true,
  },
  projects: [
    {
      name: 'dev',
      data: {
        origin: 'https://dev.example.com'
      },
    },
    {
      name: 'pre',
      data: {
        origin: 'https://pre.example.com'
      }
    },
    {
      name: 'prod',
      data: {
        origin: 'https://example.com'
      },
      config: {
        browser: {
          headless: false,
        },
      }
    }
  ],
});

export default config;

Write Testing

standard

demo.test.ts

import { test } from 'xbell';

test('login demo', async ({ page, project }) => {
  await page.goto(project.data.origin);
});

classic

demo.test.ts

import { Page, Project } from 'xbell';
import { Test, Prop } from 'xbell/decorators';

@Test()
class TestCase {
  login_demo({ page, test }) {
    const { page, project } = this;
    await page.goto(project.data.origin)
  }
}