Deflake amp-carousel e2e tests and unskip passing tests

extensions/amp-base-carousel/0.1/test-e2e/test-carousel.js

@@ -35,46 +35,32 @@ describes.endtoend(
     });
 
     it('should render correctly', async function () {
-      const slides = await getSlides(controller);
-      const slidesRects = await Promise.all(
-        slides.map(async (slide) => await controller.getElementRect(slide))
-      );
-
-      // Slides are placed on both the left and the right of the 0th slide, so
-      // that scrolling on either direction work for the looping carousel. This
-      // verifies that all slides are positioned side-by-side with the total
-      // expected width.
-      const slidesLeftmost = Math.min(...slidesRects.map(({left}) => left));
-      const slidesRightmost = Math.max(...slidesRects.map(({right}) => right));
-      await expect(slidesRightmost - slidesLeftmost).to.equal(
-        pageWidth * SLIDE_COUNT
-      );
+      const firstSlide = await getSlide(controller, 0);
 
       // Verify that the 0th slide is layed out and is at the start, and that its
       // width is equal to the page.
       await waitForCarouselImg(controller, 0);
-      await expect(slidesRects[0].left).to.equal(0);
-      await expect(slidesRects[0].width).to.equal(pageWidth);
+      await expect(controller.getElementRect(firstSlide)).to.contain({
+        left: 0,
+        width: pageWidth,
+      });
     });
 
     it('should layout the two adjacent slides', async function () {
-      const [firstSlideRect, secondSlideRect, lastSlideRect] = [
-        await controller.getElementRect(await getSlide(controller, 0)),
-        await controller.getElementRect(await getSlide(controller, 1)),
-        await controller.getElementRect(
-          await getSlide(controller, SLIDE_COUNT - 1)
-        ),
-      ];
-
-      // Verify that the second slide is layed out and is to the right of the
-      // starting slide.
-      await waitForCarouselImg(controller, 1);
-      await expect(secondSlideRect.left).to.equal(firstSlideRect.right);
+      const secondSlide = await getSlide(controller, 1);
+      const lastSlide = await getSlide(controller, SLIDE_COUNT - 1);
 
-      // Verify that the last slide is layed out and is to the left of the
-      // starting slide.
+      // Verify that the second and last slides are layed out.
+      await waitForCarouselImg(controller, 1);
       await waitForCarouselImg(controller, SLIDE_COUNT - 1);
-      await expect(lastSlideRect.right).to.equal(firstSlideRect.left);
+
+      // Verify that the second slide is to the right of the first slide.
+      await expect(controller.getElementRect(secondSlide)).to.contain({
+        left: pageWidth,
+      });
+
+      // Verify that the last slide is to the left of the first slide.
+      await expect(controller.getElementRect(lastSlide)).to.contain({right: 0});
     });
 
     it('should snap when scrolling', async function () {
@@ -211,8 +197,7 @@ describes.endtoend(
       // When resting the last few slides should be translated to the left.
       // Make sure we can move all the way forwards to the last slide and that it
       // is in the right place.
-      // TODO(wg-components, #27701): Flaky on Chrome+viewer environment.
-      it.skip('should display slides correctly when moving forwards', async function () {
+      it('should display slides correctly when moving forwards', async function () {
         this.timeout(testTimeout);
         const el = await getScrollingElement(controller);
         const slides = await getSlides(controller);
@@ -231,8 +216,7 @@ describes.endtoend(
       // When resting the first few slides should be translated to the right.
       // Make sure we can move all the way backwards to the second slide and that
       // it is in the right place.
-      // TODO(wg-components, #27701): Flaky on Chrome+viewer environment.
-      it.skip('should display slides correctly when moving backwards', async function () {
+      it('should display slides correctly when moving backwards', async function () {
         this.timeout(testTimeout);
         const el = await getScrollingElement(controller);
         const slides = await getSlides(controller);