Monorepo - move out testcafe tests as package (DevExpress#26941)

.github/workflows/testcafe_tests.yml

@@ -42,7 +42,7 @@ jobs:
       run: npm install --no-audit --no-fund
 
     - name: Build
-      run: npx nx build:testcafe devextreme-main
+      run: npx nx build devextreme-main
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -166,30 +166,30 @@ jobs:
       run: 7z x artifacts.zip -aoa
 
     - name: Run TestCafe tests
-      working-directory: ./packages/devextreme
+      working-directory: ./e2e/testcafe-devextreme
       run: |
         [ "${{ matrix.ARGS.theme }}" != "" ] && THEME="--theme ${{ matrix.ARGS.theme }}"
         [ "${{ matrix.ARGS.indices }}" != "" ] && INDICES="--indices ${{ matrix.ARGS.indices }}"
         [ "${{ matrix.ARGS.concurrency }}" != "" ] && CONCURRENCY="--concurrency ${{ matrix.ARGS.concurrency }}"
         [ "${{ matrix.ARGS.platform }}" != "" ] && PLATFORM="--platform ${{ matrix.ARGS.platform }}"
         all_args="--browsers=chrome:devextreme-shr2 --componentFolder ${{ matrix.ARGS.componentFolder }} $CONCURRENCY $INDICES $PLATFORM $THEME"
         echo "$all_args"
-        npm run test-testcafe -- $all_args
+        npm run test -- $all_args
 
     - name: Copy compared screenshot artifacts
       if: ${{ failure() }}
       uses: actions/upload-artifact@v3
       with:
         name: compared-screenshots
-        path: ${{ github.workspace }}/packages/devextreme/testing/testcafe/artifacts/compared-screenshots/**/*
+        path: ${{ github.workspace }}/e2e/testcafe/artifacts/compared-screenshots/**/*
         if-no-files-found: ignore
 
     - name: Copy failed test artifacts
       if: ${{ failure() }}
       uses: actions/upload-artifact@v3
       with:
         name: failed-tests
-        path: ${{ github.workspace }}/packages/devextreme/testing/testcafe/artifacts/failedtests/**/*
+        path: ${{ github.workspace }}/e2e/testcafe/artifacts/failedtests/**/*
         if-no-files-found: ignore
 
   notify:

e2e/testcafe-devextreme/.gitignore

@@ -0,0 +1,2 @@
+/screenshots
+/artifacts

packages/devextreme/.testcaferc.json → e2e/testcafe-devextreme/.testcaferc.json

@@ -2,9 +2,9 @@
   "screenshots": {
     "path": "./",
     "takeOnFails": true,
-    "pathPattern": "/testing/testcafe/artifacts/failedtests/${TEST}"
+    "pathPattern": "/artifacts/failedtests/${TEST}"
   },
   "screenshots-comparer": {
-    "path": "./testing/testcafe"
+    "path": "./"
   }
 }

packages/devextreme/testing/testcafe/helpers/accessibility/test.ts → e2e/testcafe-devextreme/helpers/accessibility/test.ts

@@ -1,6 +1,6 @@
 import { ElementContext } from 'axe-core';
 import { createWidget } from '../createWidget';
-import type { WidgetName } from '../widgetTypings';
+import type { WidgetName } from 'devextreme-testcafe-models/types';
 import { isMaterialBased } from '../themeUtils';
 import { a11yCheck, A11yCheckOptions } from './utils';
 import { generateOptionMatrix, Options } from '../generateOptionMatrix';

packages/devextreme/testing/testcafe/helpers/createWidget.ts → e2e/testcafe-devextreme/helpers/createWidget.ts

@@ -1,5 +1,5 @@
 import { ClientFunction } from 'testcafe';
-import type { WidgetName, WidgetOptions } from './widgetTypings';
+import type { WidgetName, WidgetOptions } from 'devextreme-testcafe-models/types';
 
 export interface CreateWidgetOptions {
   disableFxAnimation: boolean;

packages/devextreme/testing/testcafe/helpers/themeUtils.ts → e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -1,4 +1,4 @@
-import { isString } from '../../../js/core/utils/type';
+import { isString } from 'devextreme/core/utils/type';
 import { changeTheme } from './changeTheme';
 
 const defaultThemeName = 'generic.light';

packages/devextreme/testing/testcafe/helpers/widgetTypings.ts → e2e/testcafe-devextreme/helpers/widgetTypings.ts

@@ -1,5 +1,5 @@
-import type { Properties as DataGridProperties } from '../../../js/ui/data_grid';
-import type { Properties as FilterBuilderProperties } from '../../../js/ui/filter_builder';
+import type { Properties as DataGridProperties } from 'devextreme/ui/data_grid';
+import type { Properties as FilterBuilderProperties } from 'devextreme/ui/filter_builder';
 
 export type WidgetName =
   'dxAccordion'

e2e/testcafe-devextreme/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "devextreme-testcafe-tests",
+  "version": "24.1.1",
+  "scripts": {
+    "test": "node ./runner.js"
+  },
+  "devDependencies": {
+    "devextreme": "24.1.1",
+    "testcafe": "2.5.0"
+  }
+}

packages/devextreme/testing/testcafe/runner.js → e2e/testcafe-devextreme/runner.js

@@ -55,8 +55,8 @@ createTestCafe({
         setShadowDom(args);
 
         componentFolder = componentFolder ? `${componentFolder}/**` : '**';
-        if(fs.existsSync('./testing/testcafe/screenshots')) {
-            fs.rmSync('./testing/testcafe/screenshots', { recursive: true });
+        if(fs.existsSync('./screenshots')) {
+            fs.rmSync('./screenshots', { recursive: true });
         }
 
         const browsers = args.browsers.split(' ').map(expandBrowserAlias);
@@ -66,8 +66,8 @@ createTestCafe({
         const runner = testCafe.createRunner()
             .browsers(browsers)
             .reporter(reporter)
-            .src([`./testing/testcafe/tests/${componentFolder}/${file}.ts`]);
-
+            .src([`./tests/${componentFolder}/${file}.ts`]);
+    
         runner.compilerOptions({
             'typescript': {
                 customCompilerModulePath: '../../node_modules/typescript',

packages/devextreme/testing/testcafe/tests/accessibility/autocomplete.ts → e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/autocomplete.d';
+import { Properties } from 'devextreme/ui/autocomplete.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/button.ts → e2e/testcafe-devextreme/tests/accessibility/button.ts

@@ -4,8 +4,8 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/button.d';
-import Button from '../../model/button';
+import { Properties } from 'devextreme/ui/button.d';
+import Button from 'devextreme-testcafe-models/button';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/buttonGroup.ts → e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/button_group.d';
+import { Properties } from 'devextreme/ui/button_group.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/calendar.ts → e2e/testcafe-devextreme/tests/accessibility/calendar.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/calendar.d';
+import { Properties } from 'devextreme/ui/calendar.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/checkBox.ts → e2e/testcafe-devextreme/tests/accessibility/checkBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/check_box.d';
+import { Properties } from 'devextreme/ui/check_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/colorBox.ts → e2e/testcafe-devextreme/tests/accessibility/colorBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/color_box.d';
+import { Properties } from 'devextreme/ui/color_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/dateBox.ts → e2e/testcafe-devextreme/tests/accessibility/dateBox.ts

@@ -3,8 +3,8 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/date_box.d';
-import DateBox from '../../model/dateBox';
+import { Properties } from 'devextreme/ui/date_box.d';
+import DateBox from 'devextreme-testcafe-models/dateBox';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/dateRangeBox.ts → e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/date_range_box.d';
+import { Properties } from 'devextreme/ui/date_range_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/dropDownButton.ts → e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/drop_down_button.d';
+import { Properties } from 'devextreme/ui/drop_down_button.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/list.ts → e2e/testcafe-devextreme/tests/accessibility/list.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/list.d';
+import { Properties } from 'devextreme/ui/list.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/lookup.ts → e2e/testcafe-devextreme/tests/accessibility/lookup.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/lookup.d';
+import { Properties } from 'devextreme/ui/lookup.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/numberBox.ts → e2e/testcafe-devextreme/tests/accessibility/numberBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/number_box.d';
+import { Properties } from 'devextreme/ui/number_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/popup.ts → e2e/testcafe-devextreme/tests/accessibility/popup.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { ToolbarItem, Properties } from '../../../../js/ui/popup.d';
+import { ToolbarItem, Properties } from 'devextreme/ui/popup.d';
 import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`

packages/devextreme/testing/testcafe/tests/accessibility/selectBox.ts → e2e/testcafe-devextreme/tests/accessibility/selectBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/select_box.d';
+import { Properties } from 'devextreme/ui/select_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/splitter.ts → e2e/testcafe-devextreme/tests/accessibility/splitter.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Item, Properties } from '../../../../js/ui/splitter.d';
+import { Item, Properties } from 'devextreme/ui/splitter';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/switch.ts → e2e/testcafe-devextreme/tests/accessibility/switch.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/switch.d';
+import { Properties } from 'devextreme/ui/switch.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/tabPanel.ts → e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Item, Properties } from '../../../../js/ui/tab_panel.d';
+import { Item, Properties } from 'devextreme/ui/tab_panel.d';
 import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`

packages/devextreme/testing/testcafe/tests/accessibility/tabs.ts → e2e/testcafe-devextreme/tests/accessibility/tabs.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Item, Properties } from '../../../../js/ui/tabs.d';
+import { Item, Properties } from 'devextreme/ui/tabs.d';
 import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`

packages/devextreme/testing/testcafe/tests/accessibility/tagBox.ts → e2e/testcafe-devextreme/tests/accessibility/tagBox.ts

@@ -2,8 +2,8 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/tag_box.d';
-import TagBox from '../../model/tagBox';
+import { Properties } from 'devextreme/ui/tag_box.d';
+import TagBox from 'devextreme-testcafe-models/tagBox';
 
 const TIME_TO_WAIT = 150;
 

packages/devextreme/testing/testcafe/tests/accessibility/textArea.ts → e2e/testcafe-devextreme/tests/accessibility/textArea.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/text_area.d';
+import { Properties } from 'devextreme/ui/text_area.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/textBox.ts → e2e/testcafe-devextreme/tests/accessibility/textBox.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/text_box.d';
+import { Properties } from 'devextreme/ui/text_box.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/tileView.ts → e2e/testcafe-devextreme/tests/accessibility/tileView.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/tile_view.d';
+import { Properties } from 'devextreme/ui/tile_view.d';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'))

packages/devextreme/testing/testcafe/tests/accessibility/treeView.ts → e2e/testcafe-devextreme/tests/accessibility/treeView.ts

@@ -2,7 +2,7 @@ import url from '../../helpers/getPageUrl';
 import { clearTestPage } from '../../helpers/clearPage';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { Properties } from '../../../../js/ui/tree_view.d';
+import { Properties } from 'devextreme/ui/tree_view.d';
 import { employees } from '../navigation/treeView/data';
 
 fixture.disablePageReloads`Accessibility`

packages/devextreme/testing/testcafe/tests/common/draggable.ts → e2e/testcafe-devextreme/tests/common/draggable.ts

@@ -1,7 +1,7 @@
 import { ClientFunction, Selector } from 'testcafe';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
-import Scrollable from '../../model/scrollView/scrollable';
+import Scrollable from 'devextreme-testcafe-models/scrollView/scrollable';
 
 fixture.disablePageReloads`Draggable`
   .page(url(__dirname, '../container.html'));

packages/devextreme/testing/testcafe/tests/common/icons.ts → e2e/testcafe-devextreme/tests/common/icons.ts

@@ -7,7 +7,7 @@ import url from '../../helpers/getPageUrl';
 import {
   appendElementTo,
 } from '../../helpers/domUtils';
-import Guid from '../../../../js/core/guid';
+import Guid from 'devextreme/core/guid';
 
 const ICON_CLASS = 'dx-icon';
 const iconSet = {
@@ -333,7 +333,7 @@ test('SVG icon set', async (t) => {
 
     await ClientFunction(() => {
       $(`#${id}`)
-        .append($(`<img src="../../../images/icons/${themeName}/${iconName}.svg">`))
+        .append($(`<img src="../../../packages/devextreme/images/icons/${themeName}/${iconName}.svg">`))
         .append($('<div>').text(`${iconName}`));
     }, {
       dependencies: {

e2e/testcafe-devextreme/tests/container.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>TestCafe Tests Container</title>
+
+    <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
+    <link rel="dx-theme" data-theme="generic.dark" href="../../../packages/devextreme/artifacts/css/dx.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="generic.contrast" href="../../../packages/devextreme/artifacts/css/dx.contrast.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.saas.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
+
+    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
+    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
+    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+</head>
+<body class="dx-surface">
+    <div id="parentContainer" role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+        <div id="container">
+        </div>
+        <div id="otherContainer">
+        </div>
+    </div>
+</body>
+</html>