update test case 'select sheets' with page object pattern

zss.test.browser/src/pageObject/Spreadsheet.ts

@@ -0,0 +1,21 @@
+import { Selector, t } from 'testcafe';
+
+/**
+ * Implement a page object pattern.
+ * Reference:
+ * - https://devexpress.github.io/testcafe/documentation/recipes/extract-reusable-test-code/use-page-model.html
+ * - https://martinfowler.com/bliki/PageObject.html
+ */
+export default class Spreadsheet{
+    selector: any;
+    sheetbar: any;
+
+    constructor (){
+        this.selector = Selector('.zssheet');
+        this.sheetbar = this.selector.find('.zssheettab');
+    }
+
+    async select(index: number){
+        await t.click(this.sheetbar.nth(index));
+    }
+}

zss.test.browser/src/selectSheet.ts

@@ -1,21 +1,19 @@
-import { Selector } from 'testcafe';
-import { ClientFunction } from 'testcafe';
+import Spreadsheet from './pageObject/Spreadsheet';
 
 fixture `select sheets`
     .page `http://localhost:8080/zss.test/issue.zul?file=/book/t10425.xlsx`;
 
 
-const tabs = Selector('.zssheettab'); 
-
 /**
  * select sheets one by one for nTimes
  */
 test('select sheets', async t => {
-
+   let spreadsheet = new Spreadsheet();
+
     var nTimes = 10;
     for (var c = 0 ; c < nTimes ; c++){
         for (var i=0 ; i < 6 ; i++){
-            await t.click(tabs.nth(i));
+            await spreadsheet.select(i);
         }
     }
 });