feat: 补充动态切换 background 测试用例

pages/CSS/background/background-image.test.js

@@ -8,14 +8,38 @@ describe('background-image-test', () => {
 
   it('background-image-screenshot', async () => {
     await page.waitFor(300);
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   });
 
   it('background-image-select', async () => {
     await page.callMethod('updateBackgroundSelect')
     await page.waitFor(300);
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
+    expect(image).toSaveImageSnapshot();
+  });
+
+  it('动态切换 background color', async () => {
+    await page.callMethod('setBackgroundColor')
+    await page.waitFor(300);
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
+
+  })
+  it('动态切换 background color/image', async () => {
+    await page.callMethod('setBackgroundImage')
+    await page.waitFor(300);
+
+    const image = await program.screenshot({
+      fullPage: true
     });
+    expect(image).toSaveImageSnapshot();
+
+  })
 });

pages/CSS/background/background-image.uvue

@@ -8,7 +8,12 @@
       <text>不支持背景图片，仅支持linear-gradient方法</text>
       <view v-for="(direction) in directionData">
         <text>background-image: linear-gradient({{direction}}, red, yellow)</text>
-				<view class="common" :style="{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}"></view>
+        <view class="common"
+          :style="{'background-image': backgroundSelect ?'linear-gradient('+direction+', red, yellow)':''}"></view>
+      </view>
+      <view>
+        <text>style 动态切换 background</text>
+        <view @click='changeBg' class="common" :style='testStyle'></view>
       </view>
     </view>
   <!-- #ifdef APP -->
@@ -18,16 +23,31 @@
 
 <script>
   export default {
-    data(){
+    data() {
       return {
-        backgroundSelect : true,
-        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right']
+        backgroundSelect: true,
+        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right'],
+        testStyle: "background:linear-gradient(to right, red, yellow)"
       }
     },
     methods: {
       //供自动化测试使用
       updateBackgroundSelect() {
         this.backgroundSelect = !this.backgroundSelect
+      },
+      changeBg() {
+        const isColor = this.testStyle == "background:blue"
+        if (isColor) {
+          this.setBackgroundImage()
+        } else {
+          this.setBackgroundColor()
+        }
+      },
+      setBackgroundColor() {
+        this.testStyle = "background:blue"
+      },
+      setBackgroundImage() {
+        this.testStyle = "background:linear-gradient(to right, red, yellow)"
       }
     }
   }