How to test Lightning Application?

There is no information on how to test apps. Does a testing tool like Selenium work?

There is an option to make the items rendered on the canvas show in the DOM tree, but I’m uncertain of what’s the level of manipulation that can be done on them:

Per the Settings documentation (Lightning SDK):

Key Type Description Default value
inspector Boolean Whether or not initialize the Lightning Inspector (whch will render out a HTML structure inside the DOM to mimic the canvas) false

This option should be enabled under the “platformSettings” object, in settings.json

I tried this but all elements had div tags. I created a code in selenium to find an element in DOM and then press enter, but I got an error that said the element was not interactable

You can only send keys to the body of the App. We use cypress to test lightning Apps. Other way to send keys to a specific div element is to setAttribute tabindex for the div element and then sendKey.

All the nodes rendered by the Lightning’s “inspector” tool should have a “ref” attribute. You may refer to values of the attribute as it corresponds to component tag used during template generation. Thereby, having a template declared like this:

static _template() {
  return {
    Background: { rect: true, color: 0xff42facc, w: 1920, h: 1080 }
  }
}

you will see something like

<div ref="Background" style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1080px;" color="ff42facc"></div>

Then you may use CSS selector [ref="Background"] to reach to your component. You should also take into account that ref is not a unique identifier and may be repeated if you rendering multiple components that utilizing a same tag name in their templates.

1 Like