diff --git a/.ado/templates/e2e-publish-artifacts.yml b/.ado/templates/e2e-publish-artifacts.yml index a161a0a6f4..c01de166d5 100644 --- a/.ado/templates/e2e-publish-artifacts.yml +++ b/.ado/templates/e2e-publish-artifacts.yml @@ -4,17 +4,6 @@ parameters: buildArtifacts: steps: - # Generate reports. This task doesn't end until a ctrl+c is pressed. I'm not sure how to end it in this case, so - # I added a 1 minute timer. It should always generate the report in this time, then the task timeouts and continues on the pipeline. - # continueOnError is true because the pipeline should continue even on failure - - script: | - yarn report - workingDirectory: apps\${{parameters.platform}} - continueOnError: true - timeoutInMinutes: 1 - displayName: "generate ${{parameters.platform}} report" - condition: and (succeededOrFailed(), eq(${{parameters.buildArtifacts}}, 'success')) - # Copy errorShots to FluentTesterDump - task: CopyFiles@2 inputs: @@ -23,20 +12,6 @@ steps: displayName: "Copy tree dump screenshots" condition: and (succeededOrFailed(), eq(${{parameters.buildArtifacts}}, 'success')) - # Copy appium log to FluentTesterDump - - task: CopyFiles@2 - inputs: - sourceFolder: $(Build.SourcesDirectory)\apps\${{parameters.platform}}\reports\ - contents: "*" - targetFolder: $(Build.StagingDirectory)/E2E_${{parameters.applicationType}}_Dump - displayName: "Copy tree dump report logs" - condition: and (succeededOrFailed(), eq(${{parameters.buildArtifacts}}, 'success')) - - - powershell: | - Move-Item -Path $(Build.SourcesDirectory)\apps\${{parameters.platform}}\allure-report -Destination $(Build.StagingDirectory)/E2E_${{parameters.applicationType}}_Dump - displayName: "Copy allure report" - condition: and (succeededOrFailed(), eq(${{parameters.buildArtifacts}}, 'success')) - # Publish FluentTesterDump - task: PublishBuildArtifacts@1 inputs: diff --git a/apps/fluent-tester/package.json b/apps/fluent-tester/package.json index aa96cd4a50..585a4699e5 100644 --- a/apps/fluent-tester/package.json +++ b/apps/fluent-tester/package.json @@ -80,7 +80,7 @@ "ts-node": "^8.10.1", "tsconfig-paths": "^3.9.0", "typescript": "3.8.3", - "webdriverio": "5.22.4" + "webdriverio": "6.2.0" }, "peerDependencies": { "@office-iss/react-native-win32": "^0.63.7", diff --git a/apps/fluent-tester/src/E2E/BootPage/specs/BootPages.spec.win.ts b/apps/fluent-tester/src/E2E/BootPage/specs/BootPages.spec.win.ts index bf4de6eaa2..24163af055 100644 --- a/apps/fluent-tester/src/E2E/BootPage/specs/BootPages.spec.win.ts +++ b/apps/fluent-tester/src/E2E/BootPage/specs/BootPages.spec.win.ts @@ -25,116 +25,174 @@ const PAGE_TIMEOUT = 15000; describe('Open the app', function () { it('Boot app', () => { BootTestPage.waitForPageDisplayed(BOOT_APP_TIMEOUT); + browser.saveScreenshot('./errorShots/onBoot.png'); // Take a screenshot of the app for testing purposes expect(BootTestPage.isPageLoaded()).toBeTruthy(); }); }); describe('Click on each test page and check if it renders', function () { it('Button Test Page', () => { + /* Scroll to component test page button in scrollview if not already visible*/ + ButtonTestPage.scrollToComponentButton(); + ButtonTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); + + /* Click on component button to navigate to test page */ BootTestPage.clickAndGoToButtonPage(); ButtonTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ButtonTestPage.isPageLoaded()).toBeTruthy(); }); it('Callout Test Page', () => { + CalloutTestPage.scrollToComponentButton(); + CalloutTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToCalloutPage(); CalloutTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(CalloutTestPage.isPageLoaded()).toBeTruthy(); }); it('Checkbox Test Page', () => { + CheckboxTestPage.scrollToComponentButton(); + CheckboxTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToCheckboxPage(); CheckboxTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(CheckboxTestPage.isPageLoaded()).toBeTruthy(); }); it('ContextualMenu Test Page', () => { + ContextualMenuTestPage.scrollToComponentButton(); + ContextualMenuTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToContextualMenuPage(); ContextualMenuTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ContextualMenuTestPage.isPageLoaded()).toBeTruthy(); }); it('Experimental Tabs Test Page', () => { + ExperimentalTabsTestPage.scrollToComponentButton(); + ExperimentalTabsTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToExperimentalTabsPage(); ExperimentalTabsTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ExperimentalTabsTestPage.isPageLoaded()).toBeTruthy(); }); it('FocusTrapZone Test Page', () => { + FocusTrapZoneTestPage.scrollToComponentButton(); + FocusTrapZoneTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToFocusTrapZonePage(); FocusTrapZoneTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(FocusTrapZoneTestPage.isPageLoaded()).toBeTruthy(); }); it('FocusZone Test Page', () => { + FocusZoneTestPage.scrollToComponentButton(); + FocusZoneTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToFocusZonePage(); FocusZoneTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(FocusZoneTestPage.isPageLoaded()).toBeTruthy(); }); it('Icon Test Page', () => { + IconTestPage.scrollToComponentButton(); + IconTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToIconPage(); IconTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(IconTestPage.isPageLoaded()).toBeTruthy(); }); it('Link Test Page', () => { + LinkTestPage.scrollToComponentButton(); + LinkTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToLinkPage(); LinkTestPage.waitForPageDisplayed(PAGE_TIMEOUT); - expect(LinkTestPage.isPageLoaded()).toBeTruthy(); - }); - it('Tabs Test Page', () => { - BootTestPage.clickAndGoToTabsPage(); - TabsTestPage.waitForPageDisplayed(PAGE_TIMEOUT); - expect(TabsTestPage.isPageLoaded()).toBeTruthy(); + expect(LinkTestPage.isPageLoaded()).toBeTruthy(); }); it('Persona Test Page', () => { + PersonaTestPage.scrollToComponentButton(); + PersonaTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToPersonaPage(); PersonaTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(PersonaTestPage.isPageLoaded()).toBeTruthy(); }); it('PersonaCoin Test Page', () => { + PersonaCoinTestPage.scrollToComponentButton(); + PersonaCoinTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToPersonaCoinPage(); PersonaCoinTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(PersonaCoinTestPage.isPageLoaded()).toBeTruthy(); }); it('Pressable Test Page', () => { + PressableTestPage.scrollToComponentButton(); + PressableTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToPressablePage(); PressableTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(PressableTestPage.isPageLoaded()).toBeTruthy(); }); it('RadioGroup Test Page', () => { + RadioGroupTestPage.scrollToComponentButton(); + RadioGroupTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToRadioGroupPage(); RadioGroupTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(RadioGroupTestPage.isPageLoaded()).toBeTruthy(); }); it('Separator Test Page', () => { + SeparatorTestPage.scrollToComponentButton(); + SeparatorTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToSeparatorPage(); SeparatorTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(SeparatorTestPage.isPageLoaded()).toBeTruthy(); }); it('Svg Test Page', () => { + SvgTestPage.scrollToComponentButton(); + SvgTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToSvgPage(); SvgTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(SvgTestPage.isPageLoaded()).toBeTruthy(); }); + it('Tabs Test Page', () => { + TabsTestPage.scrollToComponentButton(); + TabsTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); + BootTestPage.clickAndGoToTabsPage(); + TabsTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + + expect(TabsTestPage.isPageLoaded()).toBeTruthy(); + }); + it('Text Test Page', () => { + TextTestPage.scrollToComponentButton(); + TextTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToTextPage(); TextTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(TextTestPage.isPageLoaded()).toBeTruthy(); }); it('Theme Test Page', () => { + ThemeTestPage.scrollToComponentButton(); + ThemeTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToThemePage(); ThemeTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ThemeTestPage.isPageLoaded()).toBeTruthy(); }); }); diff --git a/apps/fluent-tester/src/E2E/BootPage/specs/BootTestPage.spec.uwp.ts b/apps/fluent-tester/src/E2E/BootPage/specs/BootTestPage.spec.uwp.ts index f3a97d2328..b9f901eff4 100644 --- a/apps/fluent-tester/src/E2E/BootPage/specs/BootTestPage.spec.uwp.ts +++ b/apps/fluent-tester/src/E2E/BootPage/specs/BootTestPage.spec.uwp.ts @@ -18,68 +18,102 @@ const PAGE_TIMEOUT = 15000; describe('Open the app', function () { it('Boot app', () => { BootTestPage.waitForPageDisplayed(BOOT_APP_TIMEOUT); + browser.saveScreenshot('./errorShots/onBoot.png'); // Take a screenshot of the app for testing purposes expect(BootTestPage.isPageLoaded()).toBeTruthy(); }); }); describe('Click on each test page and check if it renders', function () { it('Button Test Page', () => { + /* Scroll to component test page button in scrollview if not already visible*/ + ButtonTestPage.scrollToComponentButton(); + ButtonTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); + + /* Click on component button to navigate to test page */ BootTestPage.clickAndGoToButtonPage(); ButtonTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ButtonTestPage.isPageLoaded()).toBeTruthy(); }); it('Callout Test Page', () => { + CalloutTestPage.scrollToComponentButton(); + CalloutTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToCalloutPage(); CalloutTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(CalloutTestPage.isPageLoaded()).toBeTruthy(); }); it('Checkbox Test Page', () => { + CheckboxTestPage.scrollToComponentButton(); + CheckboxTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToCheckboxPage(); CheckboxTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(CheckboxTestPage.isPageLoaded()).toBeTruthy(); }); it('Link Test Page', () => { + LinkTestPage.scrollToComponentButton(); + LinkTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToLinkPage(); LinkTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(LinkTestPage.isPageLoaded()).toBeTruthy(); }); it('PersonaCoin Test Page', () => { + PersonaCoinTestPage.scrollToComponentButton(); + PersonaCoinTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToPersonaCoinPage(); PersonaCoinTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(PersonaCoinTestPage.isPageLoaded()).toBeTruthy(); }); it('Pressable Test Page', () => { + PressableTestPage.scrollToComponentButton(); + PressableTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToPressablePage(); PressableTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(PressableTestPage.isPageLoaded()).toBeTruthy(); }); it('Separator Test Page', () => { + SeparatorTestPage.scrollToComponentButton(); + SeparatorTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToSeparatorPage(); SeparatorTestPage.waitForPageDisplayed(PAGE_TIMEOUT); - expect(SeparatorTestPage.isPageLoaded()).toBeTruthy(); - }); - it('Text Test Page', () => { - BootTestPage.clickAndGoToTextPage(); - TextTestPage.waitForPageDisplayed(PAGE_TIMEOUT); - expect(TextTestPage.isPageLoaded()).toBeTruthy(); + expect(SeparatorTestPage.isPageLoaded()).toBeTruthy(); }); it('Tabs Test Page', () => { + TabsTestPage.scrollToComponentButton(); + TabsTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToTabsPage(); TabsTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(TabsTestPage.isPageLoaded()).toBeTruthy(); }); + it('Text Test Page', () => { + TextTestPage.scrollToComponentButton(); + TextTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); + BootTestPage.clickAndGoToTextPage(); + TextTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + + expect(TextTestPage.isPageLoaded()).toBeTruthy(); + }); + it('Theme Test Page', () => { + ThemeTestPage.scrollToComponentButton(); + ThemeTestPage.waitForButtonDisplayed(PAGE_TIMEOUT); BootTestPage.clickAndGoToThemePage(); ThemeTestPage.waitForPageDisplayed(PAGE_TIMEOUT); + expect(ThemeTestPage.isPageLoaded()).toBeTruthy(); }); }); diff --git a/apps/fluent-tester/src/E2E/Button/pages/ButtonTestPage.win.ts b/apps/fluent-tester/src/E2E/Button/pages/ButtonTestPage.win.ts index 188ea51901..f96e69d163 100644 --- a/apps/fluent-tester/src/E2E/Button/pages/ButtonTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Button/pages/ButtonTestPage.win.ts @@ -1,4 +1,4 @@ -import { BUTTON_TESTPAGE } from '../../../FluentTester/TestComponents/Button/consts'; +import { BUTTON_TESTPAGE, HOMEPAGE_BUTTON_BUTTON } from '../../../FluentTester/TestComponents/Button/consts'; import { BasePage, By } from '../../common/BasePage'; class ButtonTestPage extends BasePage { @@ -9,6 +9,10 @@ class ButtonTestPage extends BasePage { get _pageName() { return BUTTON_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_BUTTON_BUTTON); + } } export default new ButtonTestPage(); diff --git a/apps/fluent-tester/src/E2E/Callout/pages/CalloutTestPage.win.ts b/apps/fluent-tester/src/E2E/Callout/pages/CalloutTestPage.win.ts index aeb7841ab7..6c8ddbf0c1 100644 --- a/apps/fluent-tester/src/E2E/Callout/pages/CalloutTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Callout/pages/CalloutTestPage.win.ts @@ -1,4 +1,4 @@ -import { CALLOUT_TESTPAGE } from '../../../FluentTester/TestComponents/Callout/consts'; +import { CALLOUT_TESTPAGE, HOMEPAGE_CALLOUT_BUTTON } from '../../../FluentTester/TestComponents/Callout/consts'; import { BasePage, By } from '../../common/BasePage'; class CalloutTestPage extends BasePage { @@ -9,6 +9,10 @@ class CalloutTestPage extends BasePage { get _pageName() { return CALLOUT_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_CALLOUT_BUTTON); + } } export default new CalloutTestPage(); diff --git a/apps/fluent-tester/src/E2E/Checkbox/pages/CheckboxTestPage.win.ts b/apps/fluent-tester/src/E2E/Checkbox/pages/CheckboxTestPage.win.ts index 0153f48dae..b629dd1054 100644 --- a/apps/fluent-tester/src/E2E/Checkbox/pages/CheckboxTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Checkbox/pages/CheckboxTestPage.win.ts @@ -1,4 +1,4 @@ -import { CHECKBOX_TESTPAGE } from '../../../FluentTester/TestComponents/Checkbox/consts'; +import { CHECKBOX_TESTPAGE, HOMEPAGE_CHECKBOX_BUTTON } from '../../../FluentTester/TestComponents/Checkbox/consts'; import { BasePage, By } from '../../common/BasePage'; class CheckboxTestPage extends BasePage { @@ -9,6 +9,10 @@ class CheckboxTestPage extends BasePage { get _pageName() { return CHECKBOX_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_CHECKBOX_BUTTON); + } } export default new CheckboxTestPage(); diff --git a/apps/fluent-tester/src/E2E/ContextualMenu/pages/ContextualMenuTestPage.win.ts b/apps/fluent-tester/src/E2E/ContextualMenu/pages/ContextualMenuTestPage.win.ts index 1cd3a91a04..d2e0dbf48a 100644 --- a/apps/fluent-tester/src/E2E/ContextualMenu/pages/ContextualMenuTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/ContextualMenu/pages/ContextualMenuTestPage.win.ts @@ -1,4 +1,4 @@ -import { CONTEXTUALMENU_TESTPAGE } from '../../../FluentTester/TestComponents/ContextualMenu/consts'; +import { CONTEXTUALMENU_TESTPAGE, HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../../FluentTester/TestComponents/ContextualMenu/consts'; import { BasePage, By } from '../../common/BasePage'; class ContextualMenuPage extends BasePage { @@ -9,6 +9,10 @@ class ContextualMenuPage extends BasePage { get _pageName() { return CONTEXTUALMENU_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_CONTEXTUALMENU_BUTTON); + } } export default new ContextualMenuPage(); diff --git a/apps/fluent-tester/src/E2E/FocusTrapZone/pages/FocusTrapZonePage.win.ts b/apps/fluent-tester/src/E2E/FocusTrapZone/pages/FocusTrapZonePage.win.ts index 883ab8b273..423183a71d 100644 --- a/apps/fluent-tester/src/E2E/FocusTrapZone/pages/FocusTrapZonePage.win.ts +++ b/apps/fluent-tester/src/E2E/FocusTrapZone/pages/FocusTrapZonePage.win.ts @@ -1,4 +1,4 @@ -import { FOCUSTRAPZONE_TESTPAGE } from '../../../FluentTester/TestComponents/FocusTrapZone/consts'; +import { FOCUSTRAPZONE_TESTPAGE, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../../FluentTester/TestComponents/FocusTrapZone/consts'; import { BasePage, By } from '../../common/BasePage'; class FocusTrapZonePage extends BasePage { @@ -9,6 +9,10 @@ class FocusTrapZonePage extends BasePage { get _pageName() { return FOCUSTRAPZONE_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON); + } } export default new FocusTrapZonePage(); diff --git a/apps/fluent-tester/src/E2E/FocusZone/pages/FocusZoneTestPage.win.ts b/apps/fluent-tester/src/E2E/FocusZone/pages/FocusZoneTestPage.win.ts index 38a73d7d78..2248aa34f5 100644 --- a/apps/fluent-tester/src/E2E/FocusZone/pages/FocusZoneTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/FocusZone/pages/FocusZoneTestPage.win.ts @@ -1,4 +1,4 @@ -import { FOCUSZONE_TESTPAGE } from '../../../FluentTester/TestComponents/FocusZone/consts'; +import { FOCUSZONE_TESTPAGE, HOMEPAGE_FOCUSZONE_BUTTON } from '../../../FluentTester/TestComponents/FocusZone/consts'; import { BasePage, By } from '../../common/BasePage'; class FocusZoneTestPage extends BasePage { @@ -9,6 +9,10 @@ class FocusZoneTestPage extends BasePage { get _pageName() { return FOCUSZONE_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_FOCUSZONE_BUTTON); + } } export default new FocusZoneTestPage(); diff --git a/apps/fluent-tester/src/E2E/Icon/pages/IconTestPage.win.ts b/apps/fluent-tester/src/E2E/Icon/pages/IconTestPage.win.ts index be7198d8c2..e2ccea1334 100644 --- a/apps/fluent-tester/src/E2E/Icon/pages/IconTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Icon/pages/IconTestPage.win.ts @@ -1,4 +1,4 @@ -import { ICON_TESTPAGE } from '../../../FluentTester/TestComponents/Icon/consts'; +import { ICON_TESTPAGE, HOMEPAGE_ICON_BUTTON } from '../../../FluentTester/TestComponents/Icon/consts'; import { BasePage, By } from '../../common/BasePage'; class IconTestPage extends BasePage { @@ -9,6 +9,10 @@ class IconTestPage extends BasePage { get _pageName() { return ICON_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_ICON_BUTTON); + } } export default new IconTestPage(); diff --git a/apps/fluent-tester/src/E2E/Link/pages/LinkTestPage.win.ts b/apps/fluent-tester/src/E2E/Link/pages/LinkTestPage.win.ts index 87ef43f540..fb56cfec03 100644 --- a/apps/fluent-tester/src/E2E/Link/pages/LinkTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Link/pages/LinkTestPage.win.ts @@ -1,4 +1,4 @@ -import { LINK_TESTPAGE } from '../../../FluentTester/TestComponents/Link/consts'; +import { LINK_TESTPAGE, HOMEPAGE_LINK_BUTTON } from '../../../FluentTester/TestComponents/Link/consts'; import { BasePage, By } from '../../common/BasePage'; class LinkTestPage extends BasePage { @@ -9,6 +9,10 @@ class LinkTestPage extends BasePage { get _pageName() { return LINK_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_LINK_BUTTON); + } } export default new LinkTestPage(); diff --git a/apps/fluent-tester/src/E2E/Persona/pages/PersonaTestPage.win.ts b/apps/fluent-tester/src/E2E/Persona/pages/PersonaTestPage.win.ts index 7d87101679..66d99a0b19 100644 --- a/apps/fluent-tester/src/E2E/Persona/pages/PersonaTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Persona/pages/PersonaTestPage.win.ts @@ -1,4 +1,4 @@ -import { PERSONA_TESTPAGE } from '../../../FluentTester/TestComponents/Persona/consts'; +import { PERSONA_TESTPAGE, HOMEPAGE_PERSONA_BUTTON } from '../../../FluentTester/TestComponents/Persona/consts'; import { BasePage, By } from '../../common/BasePage'; class PersonaTestPage extends BasePage { @@ -9,6 +9,10 @@ class PersonaTestPage extends BasePage { get _pageName() { return PERSONA_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_PERSONA_BUTTON); + } } export default new PersonaTestPage(); diff --git a/apps/fluent-tester/src/E2E/PersonaCoin/pages/PersonaCoinTestPage.win.ts b/apps/fluent-tester/src/E2E/PersonaCoin/pages/PersonaCoinTestPage.win.ts index 2b65c4f261..00fee4c610 100644 --- a/apps/fluent-tester/src/E2E/PersonaCoin/pages/PersonaCoinTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/PersonaCoin/pages/PersonaCoinTestPage.win.ts @@ -1,4 +1,4 @@ -import { PERSONACOIN_TESTPAGE } from '../../../FluentTester/TestComponents/PersonaCoin/consts'; +import { PERSONACOIN_TESTPAGE, HOMEPAGE_PERSONACOIN_BUTTON } from '../../../FluentTester/TestComponents/PersonaCoin/consts'; import { BasePage, By } from '../../common/BasePage'; class PersonaCoinTestPage extends BasePage { @@ -9,6 +9,10 @@ class PersonaCoinTestPage extends BasePage { get _pageName() { return PERSONACOIN_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_PERSONACOIN_BUTTON); + } } export default new PersonaCoinTestPage(); diff --git a/apps/fluent-tester/src/E2E/Pressable/pages/PressableTestPage.win.ts b/apps/fluent-tester/src/E2E/Pressable/pages/PressableTestPage.win.ts index 6202ca9b9b..22ed359d01 100644 --- a/apps/fluent-tester/src/E2E/Pressable/pages/PressableTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Pressable/pages/PressableTestPage.win.ts @@ -1,4 +1,4 @@ -import { PRESSABLE_TESTPAGE } from '../../../FluentTester/TestComponents/Pressable/consts'; +import { PRESSABLE_TESTPAGE, HOMEPAGE_PRESSABLE_BUTTON } from '../../../FluentTester/TestComponents/Pressable/consts'; import { BasePage, By } from '../../common/BasePage'; class PressableTestPage extends BasePage { @@ -9,6 +9,10 @@ class PressableTestPage extends BasePage { get _pageName() { return PRESSABLE_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_PRESSABLE_BUTTON); + } } export default new PressableTestPage(); diff --git a/apps/fluent-tester/src/E2E/RadioGroup/pages/RadioGroupTestPage.win.ts b/apps/fluent-tester/src/E2E/RadioGroup/pages/RadioGroupTestPage.win.ts index d04a394315..a95f20c3e9 100644 --- a/apps/fluent-tester/src/E2E/RadioGroup/pages/RadioGroupTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/RadioGroup/pages/RadioGroupTestPage.win.ts @@ -1,4 +1,4 @@ -import { RADIOGROUP_TESTPAGE } from '../../../FluentTester/TestComponents/RadioGroup/consts'; +import { RADIOGROUP_TESTPAGE, HOMEPAGE_RADIOGROUP_BUTTON } from '../../../FluentTester/TestComponents/RadioGroup/consts'; import { BasePage, By } from '../../common/BasePage'; class RadioGroupPage extends BasePage { @@ -9,6 +9,10 @@ class RadioGroupPage extends BasePage { get _pageName() { return RADIOGROUP_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_RADIOGROUP_BUTTON); + } } export default new RadioGroupPage(); diff --git a/apps/fluent-tester/src/E2E/Separator/pages/SeparatorTestPage.win.ts b/apps/fluent-tester/src/E2E/Separator/pages/SeparatorTestPage.win.ts index 846eaac337..3299a22bbc 100644 --- a/apps/fluent-tester/src/E2E/Separator/pages/SeparatorTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Separator/pages/SeparatorTestPage.win.ts @@ -1,4 +1,4 @@ -import { SEPARATOR_TESTPAGE } from '../../../FluentTester/TestComponents/Separator/consts'; +import { SEPARATOR_TESTPAGE, HOMEPAGE_SEPARATOR_BUTTON } from '../../../FluentTester/TestComponents/Separator/consts'; import { BasePage, By } from '../../common/BasePage'; class SeparatorTestPage extends BasePage { @@ -9,6 +9,10 @@ class SeparatorTestPage extends BasePage { get _pageName() { return SEPARATOR_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_SEPARATOR_BUTTON); + } } export default new SeparatorTestPage(); diff --git a/apps/fluent-tester/src/E2E/Svg/pages/SvgTestPage.win.ts b/apps/fluent-tester/src/E2E/Svg/pages/SvgTestPage.win.ts index 84c5fcb284..8ad36177c5 100644 --- a/apps/fluent-tester/src/E2E/Svg/pages/SvgTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Svg/pages/SvgTestPage.win.ts @@ -1,4 +1,4 @@ -import { SVG_TESTPAGE } from '../../../FluentTester/TestComponents/Svg/consts'; +import { SVG_TESTPAGE, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts'; import { BasePage, By } from '../../common/BasePage'; class SvgTestPage extends BasePage { @@ -9,6 +9,10 @@ class SvgTestPage extends BasePage { get _pageName() { return SVG_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_SVG_BUTTON); + } } export default new SvgTestPage(); diff --git a/apps/fluent-tester/src/E2E/Tabs/pages/TabsTestPage.win.ts b/apps/fluent-tester/src/E2E/Tabs/pages/TabsTestPage.win.ts index f8e15c0f28..63c25efaf9 100644 --- a/apps/fluent-tester/src/E2E/Tabs/pages/TabsTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Tabs/pages/TabsTestPage.win.ts @@ -1,4 +1,4 @@ -import { TABS_TESTPAGE } from '../../../FluentTester/TestComponents/Tabs/consts'; +import { TABS_TESTPAGE, HOMEPAGE_TABS_BUTTON } from '../../../FluentTester/TestComponents/Tabs/consts'; import { BasePage, By } from '../../common/BasePage'; class TabsTestPage extends BasePage { @@ -9,6 +9,10 @@ class TabsTestPage extends BasePage { get _pageName() { return TABS_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_TABS_BUTTON); + } } export default new TabsTestPage(); diff --git a/apps/fluent-tester/src/E2E/TabsExperimental/pages/ExperimentalTabsTestPage.win.ts b/apps/fluent-tester/src/E2E/TabsExperimental/pages/ExperimentalTabsTestPage.win.ts index 151dbb943d..4115a733c9 100644 --- a/apps/fluent-tester/src/E2E/TabsExperimental/pages/ExperimentalTabsTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/TabsExperimental/pages/ExperimentalTabsTestPage.win.ts @@ -1,4 +1,7 @@ -import { EXPERIMENTAL_TABS_TESTPAGE } from '../../../FluentTester/TestComponents/TabsExperimental/consts'; +import { + EXPERIMENTAL_TABS_TESTPAGE, + HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, +} from '../../../FluentTester/TestComponents/TabsExperimental/consts'; import { BasePage, By } from '../../common/BasePage'; class ExperimentalTabsTestPage extends BasePage { @@ -9,6 +12,10 @@ class ExperimentalTabsTestPage extends BasePage { get _pageName() { return EXPERIMENTAL_TABS_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON); + } } export default new ExperimentalTabsTestPage(); diff --git a/apps/fluent-tester/src/E2E/Text/pages/TextTestPage.win.ts b/apps/fluent-tester/src/E2E/Text/pages/TextTestPage.win.ts index 0dd22fb060..d8e39611f2 100644 --- a/apps/fluent-tester/src/E2E/Text/pages/TextTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Text/pages/TextTestPage.win.ts @@ -1,4 +1,4 @@ -import { TEXT_TESTPAGE } from '../../../FluentTester/TestComponents/Text/consts'; +import { TEXT_TESTPAGE, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts'; import { BasePage, By } from '../../common/BasePage'; class TextTestPage extends BasePage { @@ -9,6 +9,10 @@ class TextTestPage extends BasePage { get _pageName() { return TEXT_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_TEXT_BUTTON); + } } export default new TextTestPage(); diff --git a/apps/fluent-tester/src/E2E/Theme/pages/ThemeTestPage.win.ts b/apps/fluent-tester/src/E2E/Theme/pages/ThemeTestPage.win.ts index 985854473c..8026f5b3e5 100644 --- a/apps/fluent-tester/src/E2E/Theme/pages/ThemeTestPage.win.ts +++ b/apps/fluent-tester/src/E2E/Theme/pages/ThemeTestPage.win.ts @@ -1,4 +1,4 @@ -import { THEME_TESTPAGE } from '../../../FluentTester/TestComponents/Theme/consts'; +import { THEME_TESTPAGE, HOMEPAGE_THEME_BUTTON } from '../../../FluentTester/TestComponents/Theme/consts'; import { BasePage, By } from '../../common/BasePage'; class ThemeTestPage extends BasePage { @@ -9,6 +9,10 @@ class ThemeTestPage extends BasePage { get _pageName() { return THEME_TESTPAGE; } + + get _pageButton() { + return By(HOMEPAGE_THEME_BUTTON); + } } export default new ThemeTestPage(); diff --git a/apps/fluent-tester/src/E2E/common/BasePage.ts b/apps/fluent-tester/src/E2E/common/BasePage.ts index 3c517a7897..01c77a8f6d 100644 --- a/apps/fluent-tester/src/E2E/common/BasePage.ts +++ b/apps/fluent-tester/src/E2E/common/BasePage.ts @@ -1,4 +1,5 @@ const DUMMY_CHAR = ''; +const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -40 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down) export function By(testId: string): WebdriverIO.Element { return $('~' + testId); @@ -9,6 +10,18 @@ export class BasePage { return this._testPage.isDisplayed(); } + isButtonInView(): boolean { + return this._pageButton.isDisplayed(); + } + + // Scrolls to the component button in the list of components. + scrollToComponentButton(): void { + if (!this.isButtonInView()) { + const scrollViewElement = $('~SCROLLVIEW_TEST_ID'); + driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, scrollViewElement.elementId); + } + } + // Waits for page to be loaded. Timeout could differ depending on usage. waitForPageDisplayed(timeout?: number): void { browser.waitUntil( @@ -18,6 +31,27 @@ export class BasePage { timeout ?? this.waitForPageTimeout, this._pageName + ' did not render correctly. Please see /errorShots of the first failed test for more information.', 1000, + // { + // timeout: timeout ?? this.waitForPageTimeout, + // timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.', + // interval: 1000, + // }, + ); + } + + waitForButtonDisplayed(timeout?: number): void { + browser.waitUntil( + () => { + return this.isButtonInView(); + }, + timeout ?? this.waitForPageTimeout, + this._pageName + ' did not render correctly. Please see /errorShots of the first failed test for more information.', + 1000, + // { + // timeout: timeout ?? this.waitForPageTimeout, + // timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.', + // interval: 1000, + // }, ); } @@ -31,6 +65,11 @@ export class BasePage { return DUMMY_CHAR; } + // The button to select the page + get _pageButton(): WebdriverIO.Element { + return By(DUMMY_CHAR); + } + // Default timeout to wait until page is displayed (10s) - private waitForPageTimeout: number = 10000; + private waitForPageTimeout: number = 15000; } diff --git a/apps/fluent-tester/src/FluentTester/FluentTester.tsx b/apps/fluent-tester/src/FluentTester/FluentTester.tsx index 11c282f1bb..febd87ee59 100644 --- a/apps/fluent-tester/src/FluentTester/FluentTester.tsx +++ b/apps/fluent-tester/src/FluentTester/FluentTester.tsx @@ -133,7 +133,7 @@ export const FluentTester: React.FunctionComponent = (props: const TestList: React.FunctionComponent = () => { return ( - + {sortedTestComponents.map((description, index) => { return (