Create a synthetic monitor

If you used Heartbeat to set up monitors, configure the monitor in heartbeat.yml. Use source to specify where to find the tests you want to run. For example:

- name: Todos
  id: todos
  type: browser
  schedule: "@every 1m"
  params:
    target_url: "https://elastic.github.io/synthetics-demo/" 
  source:
    zip_url: 
      url: "https://github.com/elastic/synthetics-demo/archive/refs/heads/main.zip" 
      folder: "todos/synthetics-tests" 
      username: "" 
      password: ""

For a list of all available configuration options, see Browser options in the Heartbeat documentation.

[beta] This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Configure each monitor directly in your test code using monitor.use. The monitor API allows you to set unique options for each journey’s monitor directly through code. For example:

import { journey, step, monitor, expect } from '@elastic/synthetics';

journey('Ensure placeholder is correct', ({ page, params }) => {
  monitor.use({
    id: 'example-monitor',
    schedule: 10,
    throttling: {
      download: 10,
      upload: 5,
      latency: 100,
    },
  });
  step('Load the demo page', async () => {
    await page.goto('https://elastic.github.io/synthetics-demo/');
  });
  step('Assert placeholder text', async () => {
    const placeholderValue = await page.getAttribute(
      'input.new-todo',
      'placeholder'
    );
    expect(placeholderValue).toBe('What needs to be done?');
  });
});

For each journey, you can specify its schedule and the locations in which it runs. When those options are not set, Synthetics will use the default values in the global configuration file. For more details, see Synthetic tests configuration.

Here are all the available monitor configuration options:

[beta] This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. If you used Elastic Agent to set up monitors, add a project when configuring the Elastic Synthetics integration In Monitor settings, use the Monitor Type Browser.

Using the Source Type Zip URL, the fields should be set as follows:

Click Advanced Browser options to see more ways to configure your monitor.

When applying the integration policy to an Elastic Agent policy, make sure to select your dedicated synthetics agent policy.

If you used Heartbeat to set up monitors, save changes to your heartbeat.yml file and make sure you’ve completed Connect to the Elastic Stack.

[beta] This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. After setting configuration options, use the push command to create monitors. The push command will create a monitor in Kibana for each local journey so you manage all the browser monitors from your local environment.

Push journeys to Kibana using:

npx @elastic/synthetics push --auth <api-key> --url <kibana-url> --project <id|name>

To generate an API key:

For more details on using the push command, see elastic-synthetics push.

One monitor will appear on the Monitor management page for each journey.

[beta] This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. If you used Elastic Agent to set up monitors, click Save and continue in the integration UI after inputting all configurations options to create your monitor.

Copy and paste your test steps into heartbeat.yml. Heartbeat spawns a separate Node.js process, schedules your tests, and runs them on a Chromium browser.

For a full list of configuration options, see Browser options in the Heartbeat documentation.

- type: browser
  id: elastic-website 
  name: Elastic website
  schedule: "@every 1m"
  source:
    inline:
      script: |- 
      step("load homepage", async () => {
        await page.goto('https://www.elastic.co');
      });
      step("hover over products menu", async () => {
        await page.hover('css=[data-nav-item=products]');
      });

[beta] This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features. Add an inline monitor when configuring the Elastic Synthetics integration. In Monitor settings, use the Monitor Type Browser.

Then switch the Source Type to Inline script.

Add steps to the code block directly. The journey keyword isn’t required, and variables like page and params will be part of your script’s scope. You cannot import any dependencies when using inline monitors.

Click Advanced Browser options to see more ways to configure your monitor.

When applying the integration policy to an Elastic Agent policy, make sure to select your dedicated synthetics agent policy.