/coverage-360

E2E testing setup using Jest, Playwright, and Github Actions – works with A-frame

Primary LanguageJavaScriptMIT LicenseMIT

coverage-360

Scena 360's end-to-end (E2E) testing setup.

Join the Scena 360 Community!

Discord Shield

Features

Use cases

  • Learn how to write tests that modify entities programmatically and visually inspect them
  • Test VR interactions like hand-controls when you don't have a headset with you
  • Set up E2E tests and a CI pipeline for your A-frame projects
  • Use this repository for inspiration and make your A-frame projects more reliable!
  • Automate and run E2E tests in the cloud using Github Actions

Running the Example

  1. Make sure that you have the latest stable version of Yarn and Node.JS installed

  2. Run yarn intsall

  3. Run yarn test:e2e to run the example E2E test suite (e2e/example.test.js)

Preview

Sample test cases from e2e/example.test.js

it("loads a yellow cylinder", async () => {
  const color = await getShapeColor(page1, "a-cylinder");
  expect(color).toStrictEqual("#FFC65D");
});

it("animated entity reaches final height", async () => {
  const animatedBoxLoaded = await waitForEntityLoaded(page1, "#animated-box");
  expect(animatedBoxLoaded).toStrictEqual(true);

  await sleep(3000); // sleep for `dur` amount of ms
  const animatedBoxPosition = await page1.evaluate(() =>
    document.querySelector("#animated-box").getAttribute("position")
  );

  expect(animatedBoxPosition.x).toStrictEqual(0);
  expect(animatedBoxPosition.y).toStrictEqual(3);
  expect(animatedBoxPosition.z).toStrictEqual(-4);
});

File Structure

|_ .github
  |_ workflows/ # the Github Action configuration
|_ e2e
  |_ helpers # helpers/utilties for testing, querying/manipulating entities elements, etc.
  |_ example.test.js # example test suite
  |_ jest.config.js # Jest configuration
|_ .babelrc # Babel configuration so that imports/exports work
|_ index.html # sample Aframe application from aframe.io
|_ jest-puppeteer.config.js # https://github.com/smooth-code/jest-puppeteer/#configure-puppeteer
  • Contributions and forks are welcome!
  • Questions, suggestions, etc. can be posted in the issues tab or in the Scena 360 Community
  • More examples and resources coming soon!