tests: migrate buttons page tests (#6593)

* Migrate buttons page tests

* Add method for getting page tab selector + fix artifacts naming

Author: leonidlosyukov

.github/workflows/on-push-or-pull.yml

@@ -154,8 +154,8 @@ jobs:
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: playwright-report-${{ matrix.shard }}_${{ strategy.job-total }}
-          path: playwright-report
+          name: playwright-report-smoke-${{ matrix.shard }}_${{ strategy.job-total }}
+          path: apps/ngx-bootstrap-docs-e2e/playwright-report
           retention-days: 30
 
   e2e_full:
@@ -196,6 +196,6 @@ jobs:
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: playwright-report-${{ matrix.shard }}_${{ strategy.job-total }}
-          path: playwright-report
+          name: playwright-report-full-${{ matrix.shard }}_${{ strategy.job-total }}
+          path: apps/ngx-bootstrap-docs-e2e/playwright-report
           retention-days: 30

apps/ngx-bootstrap-docs-e2e/src/full/accordion_page.spec.ts

@@ -9,12 +9,10 @@ const test = base.extend<{ accordionPo: AccordionPo }>({
 });
 
 test.describe('Accordion page testing suite', () => {
-  let tabName: string;
   let tabSelector: string;
 
   test.beforeEach(async ({ accordionPo }) => {
-    tabName = 'Overview';
-    tabSelector = `tab[heading="${tabName}"]`;
+    tabSelector = accordionPo.getTabSelector('Overview');
     await accordionPo.navigateTo();
   });
 

apps/ngx-bootstrap-docs-e2e/src/full/alerts_page.spec.ts

@@ -9,12 +9,10 @@ const test = base.extend<{ alertsPo: AlertsPo }>({
 });
 
 test.describe('Alerts page testing suite', () => {
-  let tabName: string;
   let tabSelector: string;
 
   test.beforeEach(async ({ alertsPo }) => {
-    tabName = 'Overview';
-    tabSelector = `tab[heading="${tabName}"]`;
+    tabSelector = alertsPo.getTabSelector('Overview');
     await alertsPo.navigateTo();
   });
 

apps/ngx-bootstrap-docs-e2e/src/full/buttons_page.spec.ts

@@ -9,12 +9,10 @@ const test = base.extend<{ accordionPo: AccordionPo }>({
 });
 
 test.describe('Accordion page testing suite', () => {
-  let tabName: string;
   let tabSelector: string;
 
   test.beforeEach(async ({ accordionPo }) => {
-    tabName = 'Overview';
-    tabSelector = `tab[heading="${tabName}"]`;
+    tabSelector = accordionPo.getTabSelector('Overview');
     await accordionPo.navigateTo();
   });
 

apps/ngx-bootstrap-docs-e2e/src/full/buttons_page_spec.ts

@@ -9,12 +9,10 @@ const test = base.extend<{ alertsPo: AlertsPo }>({
 });
 
 test.describe('Alerts page testing suite', () => {
-  let tabName: string;
   let tabSelector: string;
 
   test.beforeEach(async ({ alertsPo }) => {
-    tabName = 'Overview';
-    tabSelector = `tab[heading="${tabName}"]`;
+    tabSelector = alertsPo.getTabSelector('Overview');
     await alertsPo.navigateTo();
   });
 

apps/ngx-bootstrap-docs-e2e/src/integration/accordion_page.spec.ts

@@ -0,0 +1,33 @@
+import { test as base } from '@playwright/test';
+import { ButtonsPo } from '../support/buttons.po';
+
+const test = base.extend<{ buttonsPo: ButtonsPo }>({
+  buttonsPo: async ({ page }, use) => {
+    const buttonsPo = new ButtonsPo(page);
+    await use(buttonsPo);
+  },
+});
+
+test.describe('Buttons page testing suite', () => {
+  let tabSelector: string;
+
+  test.beforeEach(async ({ buttonsPo }) => {
+    tabSelector = buttonsPo.getTabSelector('Overview');
+    await buttonsPo.navigateTo();
+  });
+
+  test.describe('Basic', () => {
+    let basicBtn: string;
+
+    test.beforeEach(async ({ buttonsPo }) => {
+      basicBtn = tabSelector + buttonsPo.exampleDemosArr.basic;
+    });
+
+    test('example contains only enabled button with text on it', async ({ buttonsPo }) => {
+      await buttonsPo.expectBtnVisible(basicBtn, 'button', 'Single Button');
+      await buttonsPo.expectBtnEnabled(basicBtn, 'Single Button');
+      await buttonsPo.clickOnBtn(basicBtn);
+      await buttonsPo.expectBtnTxtEqual(basicBtn, ' Single Button\n');
+    });
+  });
+});