Question

我创建了一个Bootstrap幻灯片和几个卡片组件。我什至将如何开始测试幻灯片是否可与Xunit一起使用？我需要确保滑块（向左和向右箭头）确实起作用，并且它们渲染的是字幕所显示的相同图片。我添加了一些自定义代码。我将如何编写网络测试以确保例如滑动箭头起作用？

https://getbootstrap.com/docs/4.0/components/carousel/

.imgcarousel {
    width:100%;
}


.carouselleftarrow {
    font-family: Material Icons;
    position: absolute;
    bottom: 5px;
    content: "\e408";
}

.carouselrightarrow {
    font-family: Material Icons;
    position: absolute;
    bottom: 5px;
    content: "\e409";
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
   rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="carousel slide" data-ride="carousel" id="Carouselid0efe5f93f1734c5a967cf4ff7c47775a" style="  width: 500px;
   height: 500px;">
   <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
      <li data-slide-to="1" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
      <li data-slide-to="2" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class="active"></li>
   </ol>
   <div class="carousel-inner">
      <div class="item"><img class="imgcarousel mCS_img_loaded" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"></div>
      <div class="item"><img class="imgcarousel mCS_img_loaded" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
      <div class="item active"><img class="imgcarousel mCS_img_loaded" src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9"></div>
   </div>
   <a class="left carousel-control" data-slide="prev" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselleftarrow">navigate_before</span></a><a class="right carousel-control" data-slide="next" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselrightarrow">navigate_next</span></a>
</div>

Answer 1

类似的东西：

public class MyTests
{
    private IWebDriver _webdriver = new ChromeDriver();

    [Fact]
    public void CarouselWithMultipleItems_ClickRightButton_NavigatesToNextItem()
    {
        // Arrange
        // Load page
        _webdriver.Url = "your-url-here";

        // Wait until right button is clickable
        WebDriverWait wait = new WebDriverWait(_webdriver, new TimeSpan(0, 0, 30));
        WebElement rightArrow = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("a.right.carousel-control")));

        // Act
        rightArrow.Click();

        // Assert
        WebElement caption = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.CssSelector("<caption-selector-here>")));
        // You might need another wait here
        WebElement picture = _webdriver.FindElement(By.CssSelector(".imgcarousel.active"));

        // Do your assert logic here
    }
}

应该让您开始。不用说，您将需要包含相关的xUnit NuGet封装。以及Selenium.WebDriver，Selenium.Support，SeleniumChrome.WebDriver和DotNetSeleniumExtras（可能还有其他一些必需的东西）。

网络核心：幻灯片放映机的编写单元测试用例

1 个答案: