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

@@ -2,15 +2,20 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
-		<view>
+    <view>
       <!-- 测试iOS平台宽高为0时，设置渐变色会不会导致闪退 -->
       <view style="width: 0px; height: 0px; background-image: linear-gradient(to bottom,#f5f5f5,#eff2f5);"></view>
-			<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>
+      <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>
-		</view>
+      <view>
+        <text>style 动态切换 background</text>
+        <view @click='changeBg' class="common" :style='testStyle'></view>
+      </view>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -18,24 +23,39 @@
 
 <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)"
       }
     }
   }
 </script>
 
 <style>
-	.common {
-		width: 250px;
-		height: 250px;
-	}
+  .common {
+    width: 250px;
+    height: 250px;
+  }
 </style>