useDom and enablePatterns Flags

useDom and enablePatterns are used for enriching the LAYOUT match level. Occasionally, when testing pages with a complex structure, in order to better verify meaningful changes, one or both of these flags can be used. 

useDom:

Occasionally, in situations where the layout of the page can be interpreted in several ways, our algorithm can benefit from additional data points in order to accurately report on the differences on certain pages. UseDom tells LAYOUT to read the DOM and utilize it to make better decisions.

In this example, the page being tested has various items for sale that change in structure. The top of the image is being detected as text because in LAYOUT and without the DOM, the algorithm has no context that the text is a part of the image. Enabling useDom, in this case, allows eyes to identify that the text is a part of the image, compare the items and detect that it follows the same layout structure. The result would be without differences highlighted, as follows:

enablePatterns: 

EnablePatterns is a server-side enhancement that adds advanced pattern matching, which can enable the checking of more dynamic elements, such as data tables of different sizes. 

Here, useDom is enabled to give eyes context of the DOM, but in this case, the structure of the DOM has changed as there are sale prices and "in store pickup" options added to the DOM structure in a few of the items. Adding enablePatterns allows additional computation to identify patterns in the structure and allow changes that follow the pattern. In this case, we detect that each item may or may not include a star rating and could also may or may not have an "in store pickup" option. 

Enabling both useDom and enablePatterns will result in the following comparison:

Java:

Fluent: 

eyes.check("Step Name", Target.window().fully().matchLevel(MatchLevel.LAYOUT).useDom(true).enablePatterns(true));

Config:

eyes.setConfiguration(new Configuration().setUseDom(true).setEnablePatterns(false));

JavaScript:

Fluent:

await eyes.check('Step Name', Target.window().fully().matchLevel(MatchLevel.Layout).useDom(true).enablePatterns(true));

Config:

eyes.setConfiguration(eyes.getConfiguration().setUseDom(true).setEnablePatterns(true));

await eyes.check('Step Name', Target.window().fully().matchLevel(MatchLevel.Layout).useDom(true).enablePatterns(true));

eyes.setConfiguration(eyes.getConfiguration().setUseDom(true).setEnablePatterns(true));

cy.eyesCheckWindow({
    useDom: true,
    enablePatterns: true,
    matchLevel: 'Layout'
})

In Applitools.config.js:

useDom: true,
enablePatterns: true