2020-06-24 16:11:25

67cb8acf · wizardforcel · 411c1666 · 67cb8acf · 67cb8acf · 67cb8acf
7 changed file
--- a/docs/136.md
+++ b/docs/136.md
@@ -203,6 +203,18 @@ public class ScreenshotTest {

 为每行代码提供了注释，因此它是不言自明的。

-![Eclipse output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20815%20362'%3E%3C/svg%3E)
+![Eclipse output](img/d9bba1da5599720cb4111735fe851a62.png)

-<noscript><img alt="Eclipse output" class="alignnone size-full wp-image-13444" height="362" src="img/d9bba1da5599720cb4111735fe851a62.png" width="815"/><p>在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“<strong> ScreenshotTest.java </strong>”已通过，并且控制台没有错误。</p><p>如代码中所指定，屏幕快照以上述格式的名称保存在“<strong> E：/ Selenium / screenshots </strong>”路径中。</p><p><img alt="Saved Screenshot" class="alignnone size-full wp-image-13445" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/2_SavedScreenshot-1.jpg" height="257" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20669%20257'%3E%3C/svg%3E" width="669"/></p><noscript><img alt="Saved Screenshot" class="alignnone size-full wp-image-13445" height="257" src="img/a83607c72020b85243e2b2f56815046b.png" width="669"/><p>这是捕获的屏幕截图，</p><p><img alt="Captured Screenshot" class="alignnone size-full wp-image-13443" data-lazy-sizes="(max-width: 1033px) 100vw, 1033px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken.jpg 1033w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-300x170.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-1024x582.jpg 1024w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-768x436.jpg 768w" height="587" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201033%20587'%3E%3C/svg%3E" width="1033"/></p><noscript><img alt="Captured Screenshot" class="alignnone size-full wp-image-13443" height="587" sizes="(max-width: 1033px) 100vw, 1033px" src="img/09ae5e35e176df55907d645952dba8b3.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken.jpg 1033w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-300x170.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-1024x582.jpg 1024w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_ScreenshotTaken-768x436.jpg 768w" width="1033"/><p>现在是时候在您的测试过程中实现这一点并为自己可视化魔术了。</p><p>Happy photographing the screen 😉</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10g-advanced-webdriver-saving-screenshots-to-word-document/" title="10g. Advanced WebDriver – Saving screenshots to a word document"> 10 克。 高级 WebDriver – 将屏幕截图保存到 Word 文档</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“`ScreenshotTest.java`”已通过，并且控制台没有错误。
+
+如代码中所指定，屏幕快照以上述格式的名称保存在“`E:/Selenium/screenshots`”路径中。
+
+![Saved Screenshot](img/a83607c72020b85243e2b2f56815046b.png)
+
+这是捕获的屏幕截图，
+
+![Captured Screenshot](img/09ae5e35e176df55907d645952dba8b3.png)
+
+现在是时候在您的测试过程中实现这一点并为自己可视化魔术了。
+
+祝屏幕截图愉快！😉
\ No newline at end of file
--- a/docs/137.md
+++ b/docs/137.md
@@ -239,6 +239,18 @@ public class WordDocWithScreenshotTest {

 如果遵循注释，该代码是不言自明的。 Eclipse 的输出如下，

-![Document Eclipse output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20810%20377'%3E%3C/svg%3E)
+![Document Eclipse output](img/cfe92b1c436c1f2d0946c238a4c772f1.png)

-<noscript><img alt="Document Eclipse output" class="alignnone size-full wp-image-13504" height="377" src="img/cfe92b1c436c1f2d0946c238a4c772f1.png" width="810"/><p>在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“<strong> WordDocWithScreenshotTest.java </strong>”已通过，并且控制台没有错误。 按预期打印“Word 文档创建成功”。</p><p>按照代码中的指定，屏幕快照将以上述格式的名称保存到“<strong> E：/ Selenium / screenshots </strong>”路径中。</p><p><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/5_WordSavedScreenshots-1.jpg" height="239" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20389%20239'%3E%3C/svg%3E" width="389"/></p><noscript><img alt="Saved screenshots" class="alignnone size-full wp-image-13505" height="239" src="img/5c56b0f1090d7f365f904ce1cb7bc6d6.png" width="389"/><p>还将创建单词文档并将其保存在指定的位置“<strong> E：/ Selenium / </strong>”中。 该文件如下所示，</p><p><img alt="Created Word Document" class="alignnone size-full wp-image-13503" data-lazy-sizes="(max-width: 1005px) 100vw, 1005px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" height="619" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201005%20619'%3E%3C/svg%3E" width="1005"/></p><noscript><img alt="Created Word Document" class="alignnone size-full wp-image-13503" height="619" sizes="(max-width: 1005px) 100vw, 1005px" src="img/c0e8c6605f52e31de7ba508ce15d0086.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1.jpg 1005w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-300x185.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/06/6_WordCreatedDoc-1-768x473.jpg 768w" width="1005"/><p>创建的 Word 文档，所有代码文件和 JAR 文件都放置在<a href="https://github.com/JBTAdmin/Selenium"> GitHub 仓库</a>中，以便于访问。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读“README.md”文件以获取明确说明。</p><p>编码愉快！ 祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10h-advanced-webdriver-sending-email-with-attachments/" title="10h. Advanced WebDriver – Sending email with attachments"> 10 小时。 高级 WebDriver – 发送带有附件的电子邮件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+在 Eclipse IDE 中，“JUnit”窗格清楚地显示了测试用例“`WordDocWithScreenshotTest.java`”已通过，并且控制台没有错误。 按预期打印“Word 文档创建成功”。
+
+按照代码中的指定，屏幕快照将以上述格式的名称保存到“`E:/Selenium/screenshots`”路径中。
+
+![Saved screenshots](img/5c56b0f1090d7f365f904ce1cb7bc6d6.png)
+
+还将创建单词文档并将其保存在指定的位置“ `E:/Selenium/`”中。 该文件如下所示，
+
+![Created Word Document](img/c0e8c6605f52e31de7ba508ce15d0086.png)
+
+创建的 Word 文档，所有代码文件和 JAR 文件都放置在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium)中，以便于访问。 您可以为仓库加注星标和分支以方便使用。 请仔细阅读“`README.md`”文件以获取明确说明。
+
+编码愉快！ 祝你今天愉快！
--- a/docs/138.md
+++ b/docs/138.md
@@ -239,6 +239,18 @@ SendMail.send("[[email protected]](/cdn-cgi/l/email-protection)", to, "JUnit Re

 在“运行方式-> Java 应用”下，Eclipse IDE 控制台的输出如下所示，

-![Email eclipse console output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20499%20131'%3E%3C/svg%3E)
+![Email eclipse console output](img/f86911f5f3e724f4f0f756b02cbb24e2.png)

-<noscript><img alt="Email eclipse console output" class="alignnone size-full wp-image-13546" height="131" src="img/f86911f5f3e724f4f0f756b02cbb24e2.png" width="499"/><p>该电子邮件将在收件人的收件箱中接收。</p><p><img alt="Email received in Inbox" class="alignnone size-full wp-image-13545" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/1_EmailReceivedInbox-1.jpg" height="298" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201282%20298'%3E%3C/svg%3E" width="1282"/></p><noscript><img alt="Email received in Inbox" class="alignnone size-full wp-image-13545" height="298" src="img/dc54350168b4d2d375448a69dcdf1262.png" width="1282"/><p>显示生成的带有附件的电子邮件，以供您参考。</p><p><img alt="Generated email" class="alignnone size-full wp-image-13547" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/06/3_GeneratedEmail-1.jpg" height="525" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20917%20525'%3E%3C/svg%3E" width="917"/></p><noscript><img alt="Generated email" class="alignnone size-full wp-image-13547" height="525" src="img/ec66e3d16d437df63174e68a50e156cb.png" width="917"/><p><strong> <em>注意：</em> </strong> <em>当心！ 您可能碰到“<strong> javax.mail.AuthenticationFailedException </strong>”。 发生此异常的主要原因是 Google 提供的安全性和保护功能。 一种简单的解决方法是，通过单击链接<a href="https://www.google.com/settings/security/lesssecureapps"> https://www.google.com/settings/security/lesssecureapps </a>来打开“允许安全程度较低的应用”的访问以进行测试。 </em></p><p>试试看，让我知道在拍摄电子邮件时是否遇到任何问题。</p><p>实验愉快！ 祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10i-advanced-webdriver-property-files/" title="10i. Advanced WebDriver – Using property files"> 10i。 高级 WebDriver – 使用属性文件</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+该电子邮件将在收件人的收件箱中接收。
+
+![Email received in Inbox](img/dc54350168b4d2d375448a69dcdf1262.png)
+
+显示生成的带有附件的电子邮件，以供您参考。
+
+![Generated email](img/ec66e3d16d437df63174e68a50e156cb.png)
+
+**注意：** *当心！ 您可能碰到“`javax.mail.AuthenticationFailedException`”。 发生此异常的主要原因是 Google 提供的安全性和保护功能。 一种简单的解决方法是，通过单击链接 [https://www.google.com/settings/security/lesssecureapps](https://www.google.com/settings/security/lesssecureapps) 来打开“允许安全程度较低的应用”的访问以进行测试。*
+
+试试看，让我知道在拍摄电子邮件时是否遇到任何问题。
+
+实验愉快！ 祝你今天愉快！
--- a/docs/139.md
+++ b/docs/139.md
@@ -16,4 +16,207 @@

 现在，右键单击“资源包->新建->文件”。 让文件名是“`config.properties`”。

-<noscript><img alt="Folder Structure" class="alignnone size-full wp-image-13555" height="281" sizes="(max-width: 350px) 100vw, 350px" src="img/b6caa2e423b83a552625a195bf5ccbf3.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/1_FolderStructue.jpg 350w, https://javabeginnerstutorial.com/wp-content/uploads/2018/07/1_FolderStructue-300x241.jpg 300w" width="350"/><h2><strong>步骤 2：</strong></h2><p>现在是时候从测试用例中提取所有这些硬编码的值了。</p><p>在“<strong> config.properties </strong>”文件中，将所有必需的属性作为键值对。 这将帮助我们在测试用例中引用每个属性及其密钥，该属性将在一分钟内演示。 可以在这个特定文件中对值进行任何更改，并且这些更改将神奇地反映在进行引用的所有测试用例中。</p><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span></p><p><img alt="property file" class="alignnone size-full wp-image-13576" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/3_PropertiesFile-1-1.jpg" height="241" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20737%20241'%3E%3C/svg%3E" width="737"/></p><noscript><img alt="property file" class="alignnone size-full wp-image-13576" height="241" src="img/30192b906e750b66936d351b54584625.png" width="737"/><h2><strong>步骤 3：</strong></h2><p>为了在测试案例中使用这些属性，</p><p><code data-enlighter-language="java">Properties props = new Properties(); </code></p><p>– 声明“属性”类型的“属性”变量。 这将创建一个没有默认值的空属性列表。</p><p>这需要从 java.util 包<code data-enlighter-language="java">import java.util.Properties;</code>导入</p><p><code data-enlighter-language="java">FileInputStream fis = new FileInputStream("resources//config.properties"); </code> –</p><p>创建一个连接以从“resources”包下的“config.properties”文件中读取所有属性。</p><p>这也需要从 java.io 包<code data-enlighter-language="java">import java.io.FileInputStream;</code>中导入</p><p><code data-enlighter-language="null">props.load(fis); </code>-使用打开的连接“fis”从输入字节流中读取所有属性。</p><p><code data-enlighter-language="java">props.getProperty("baseURL"); </code> – 要获取特定属性的值，请使用“getProperty”方法。 将在双引号中提及相应的键作为 getProperty（）方法的参数。 它使用属性列表中的指定键搜索属性。 如果找不到密钥，则返回 null。</p><h2><strong>总体图片</strong></h2><p>让我们看一个测试案例，实现到目前为止所涵盖的概念，</p><h3><strong> <em>场景</em> </strong></h3><ol><li>打开 Firefox 浏览器。</li><li>从属性文件中读取 firefox 驱动程序路径和基本 URL。</li><li>导航到<a href="https://chandanachaitanya.github.io/selenium-practice-site/">演示站点</a></li><li>按名称找到“三轮车”复选框，然后将相应的消息打印到控制台</li><li>检查“三轮车”复选框是否已启用，并将相应消息打印到控制台</li><li>根据“货车”和“SUV”复选框的当前选择状态，选中或取消选中并打印执行 click（）动作前后的状态</li><li>使用 XPath 找到“轿车”复选框</li><li>使用两次迭代在选择状态和取消选择状态之间切换</li><li>使用 cssSelector 找到“杂志”单选按钮</li><li>检查是否默认选中</li><li>如果是，则将相应消息打印到控制台，如果否，请选择单选按钮</li></ol><p>验证 Eclipse IDE 控制台输出屏幕和 JUnit 窗格是否成功</p><h3><strong>此方案的 JUnit 代码为</strong></h3><p><strong> Config.properties </strong></p><pre><code class="language-java">#Properties as key-value pairs baseUrl=https://chandanachaitanya.github.io/selenium-practice-site/ logoPath=E:\\Selenium\\Logo.png <a class="__cf_email__" data-cfemail="62050f030b0e5f160711160710525322050f030b0e4c010d0f" href="/cdn-cgi/l/email-protection">[email protected]</a> pdfReportPath=E:\\Selenium\\junit.pdf firefoxPath=E:\\Softwares\\Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe chromePath=browser-drivers\\chromedriver.exe IEPath=browser-drivers\\IEDriverServer.exe</code></pre><p><strong> RadioBtns_Checkboxes.java </strong></p><pre><code class="language-java">package com.blog.junitTests; import java.io.FileInputStream; import java.util.List; import java.util.Properties; import java.util.concurrent.TimeUnit; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class RadioBtns_Checkboxes { // Declaring variables private WebDriver driver; private String baseUrl; Properties props; @Before public void setUp() throws Exception { // Creates an empty property list props = new Properties(); // A connection is created to config.properties file FileInputStream fis = new FileInputStream("resources//config.properties"); // Reads the properties from the input byte stream props.load(fis); // Get the firefox driver path from property file String firefoxPath = props.getProperty("firefoxPath"); // Assign the URL to be invoked to a String variable baseUrl = props.getProperty("baseUrl"); // Mention the property where required System.setProperty("webdriver.gecko.driver", firefoxPath); // Create a new instance for the class FirefoxDriver // that implements WebDriver interface driver = new FirefoxDriver(); // Implicit wait for 5 seconds driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); } @Test public void testPageTitle() throws Exception { // Open baseUrl in Firefox browser window driver.get(baseUrl); // Locate 'Tricycle' checkbox using name WebElement tricycleCheckbox = driver.findElement(By.name("vehicle2")); // Check if tricyle is displayed System.out.println("Is tricycle displayed? "+ tricycleCheckbox.isDisplayed()); // Check if tricyle is enabled to select if (tricycleCheckbox.isEnabled()) { // Click if enabled tricycleCheckbox.click(); } else { // Print message to console if disabled System.out.println("Unable to select 'Tricycle' checkbox as it is disabled."); } //Get all checkbox elements in a list List&lt;WebElement&gt; list = driver.findElements(By .cssSelector("input[type='checkbox']")); // Loops through all checkboxe elements for (int i = 0; i &lt; list.size(); i++) { // Checking if the checkbox is a 'Van' or 'SUV' if ((list.get(i).getAttribute("value").trim() .equalsIgnoreCase("van")) || (list.get(i).getAttribute("value").trim() .equalsIgnoreCase("suv"))) { // Print selection status to console System.out.println("BEFORE: Is " + list.get(i).getAttribute("value") + " selected? " + list.get(i).isSelected()); // Check if the checkbox is selected if (!(list.get(i).isSelected())) { // Click the checkbox list.get(i).click(); System.out.println("AFTER: Is " + list.get(i).getAttribute("value") + " selected? " + list.get(i).isSelected()); } else { // Uncheck the checkbox list.get(i).click(); System.out.println("AFTER: Is " + list.get(i).getAttribute("value") + " selected? " + list.get(i).isSelected()); } System.out.println("Next..."); } } // Locate 'Sedan' checkbox using xPath WebElement sedanCheckbox = driver.findElement(By .xpath("//input[@name='vehicle5']")); System.out.println("Trying to select and de-select Sedan checkbox..."); for (int i = 0; i &lt; 2; i++) { // Click the checkbox sedanCheckbox.click(); // Print current status to console System.out.println("Selection status of 'Sedan' checkbox: " + sedanCheckbox.isSelected()); } // Locate 'Magazines' radio button using cssSelector WebElement magazinesRadioBtn = driver.findElement(By .cssSelector("input[value='Magazines']")); // Check if radio button is selected by default if (magazinesRadioBtn.isSelected()) { // Print message to console System.out.println("Magazines radio button is selected by default"); } else { // Click the radio button magazinesRadioBtn.click(); } } //End of @Test @After public void tearDown() throws Exception { // Close the Firefox browser driver.close(); } }</code></pre><h2><strong>输出</strong></h2><p>每行代码都提供了清晰的注释，使其易于说明。 执行测试用例后，eclipse IDE 控制台窗口的输出如下，</p><p><img alt="property file eclipse output" class="alignnone size-full wp-image-13553" data-lazy-sizes="(max-width: 678px) 100vw, 678px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_EclipseOutput.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_EclipseOutput.jpg 678w, https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_EclipseOutput-300x209.jpg 300w" height="473" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20678%20473'%3E%3C/svg%3E" width="678"/></p><noscript><img alt="property file eclipse output" class="alignnone size-full wp-image-13553" height="473" sizes="(max-width: 678px) 100vw, 678px" src="img/259ea2204c75dfa434e16dd2865ada9a.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_EclipseOutput.jpg 678w, https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_EclipseOutput-300x209.jpg 300w" width="678"/><p>属性文件使自动化测试人员的生活成真，梦想成真。 由此证明！ 现在该尝试使用今天的概念了。 请务必戴好安全帽，以免碰到<a href="https://javabeginnerstutorial.com/core-java-tutorial/exception-handling-try-catch-java/">例外</a>！ 还有一件事，我可以在<a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Property%20Files"> GitHub 仓库</a>中找到所有代码文件。 去看一下！</p><p>再见！ 祝你有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10j-advanced-webdriver-reading-data-from-excel-using-poi/" title="10j. Advanced WebDriver – Reading data from excel using POI"> 10j。 先进的 WebDriver – 使用 POI 从 excel 读取数据</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+![Folder Structure](img/b6caa2e423b83a552625a195bf5ccbf3.png)
+
+## **步骤 2：**
+
+现在是时候从测试用例中提取所有这些硬编码的值了。
+
+在“`config.properties`”文件中，将所有必需的属性作为键值对。 这将帮助我们在测试用例中引用每个属性及其密钥，该属性将在一分钟内演示。 可以在这个特定文件中对值进行任何更改，并且这些更改将神奇地反映在进行引用的所有测试用例中。
+
+![property file](img/30192b906e750b66936d351b54584625.png)
+
+## **步骤 3：**
+
+为了在测试案例中使用这些属性，
+
+`Properties props = new Properties();`
+
+声明“属性”类型的“属性”变量。 这将创建一个没有默认值的空属性列表。
+
+这需要从`java.util`包导入`import java.util.Properties;`
+
+`FileInputStream fis = new FileInputStream("resources//config.properties");` –
+
+创建一个连接以从“`resources`”包下的“`config.properties`”文件中读取所有属性。
+
+这也需要从`java.io`包中导入`import java.io.FileInputStream;`
+
+`props.load(fis);` - 使用打开的连接“`fis`”从输入字节流中读取所有属性。
+
+`props.getProperty("baseURL");` – 要获取特定属性的值，请使用“`getProperty`”方法。 将在双引号中提及相应的键作为 `getProperty()`方法的参数。 它使用属性列表中的指定键搜索属性。 如果找不到密钥，则返回`null`。
+
+## **总体图片**
+
+让我们看一个测试案例，实现到目前为止所涵盖的概念，
+
+### ***场景***
+
+1.  打开 Firefox 浏览器。
+2.  从属性文件中读取 firefox 驱动程序路径和基本 URL。
+3.  导航到[演示站点](https://chandanachaitanya.github.io/selenium-practice-site/)
+4.  按名称找到“三轮车”复选框，然后将相应的消息打印到控制台
+5.  检查“三轮车”复选框是否已启用，并将相应消息打印到控制台
+6.  根据“货车”和“SUV”复选框的当前选择状态，选中或取消选中并打印执行`click()`动作前后的状态
+7.  使用 XPath 找到“轿车”复选框
+8.  使用两次迭代在选择状态和取消选择状态之间切换
+9.  使用`cssSelector`找到“杂志”单选按钮
+10.  检查是否默认选中
+11.  如果是，则将相应消息打印到控制台，如果否，请选择单选按钮
+
+验证 Eclipse IDE 控制台输出屏幕和 JUnit 窗格是否成功
+
+### **此方案的 JUnit 代码**
+
+**`Config.properties`**
+
+```java
+#Properties as key-value pairs
+baseUrl=https://chandanachaitanya.github.io/selenium-practice-site/
+logoPath=E:\\Selenium\\Logo.png
+gmail=tester01@gmail.com
+pdfReportPath=E:\\Selenium\\junit.pdf
+firefoxPath=E:\\Softwares\\Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe
+chromePath=browser-drivers\\chromedriver.exe
+IEPath=browser-drivers\\IEDriverServer.exe
+```
+
+**`RadioBtns_Checkboxes.java`**
+
+```java
+package com.blog.junitTests;
+
+import java.io.FileInputStream;
+import java.util.List;
+import java.util.Properties;
+import java.util.concurrent.TimeUnit;
+
+import org.junit.After;
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.firefox.FirefoxDriver;
+
+public class RadioBtns_Checkboxes {
+  // Declaring variables
+  private WebDriver driver;
+  private String baseUrl;
+  Properties props; 
+
+  @Before
+  public void setUp() throws Exception {
+    // Creates an empty property list
+    props = new Properties();
+    // A connection is created to config.properties file
+    FileInputStream fis = new FileInputStream("resources//config.properties");
+    // Reads the properties from the input byte stream
+    props.load(fis);
+    // Get the firefox driver path from property file
+    String firefoxPath = props.getProperty("firefoxPath");
+    // Assign the URL to be invoked to a String variable
+    baseUrl = props.getProperty("baseUrl");
+
+    // Mention the property where required
+    System.setProperty("webdriver.gecko.driver", firefoxPath);
+    // Create a new instance for the class FirefoxDriver
+    // that implements WebDriver interface
+    driver = new FirefoxDriver();
+    // Implicit wait for 5 seconds
+    driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
+  }
+
+  @Test
+  public void testPageTitle() throws Exception {
+    // Open baseUrl in Firefox browser window
+    driver.get(baseUrl);
+
+    // Locate 'Tricycle' checkbox using name
+    WebElement tricycleCheckbox = driver.findElement(By.name("vehicle2"));
+    // Check if tricyle is displayed
+    System.out.println("Is tricycle displayed? "+ tricycleCheckbox.isDisplayed());
+    
+    // Check if tricyle is enabled to select
+    if (tricycleCheckbox.isEnabled()) {
+      // Click if enabled
+      tricycleCheckbox.click();
+    } else {
+      // Print message to console if disabled
+      System.out.println("Unable to select 'Tricycle' checkbox as it is disabled.");
+    }
+    
+    //Get all checkbox elements in a list
+    List<WebElement> list = driver.findElements(By
+        .cssSelector("input[type='checkbox']"));
+
+    // Loops through all checkboxe elements
+    for (int i = 0; i < list.size(); i++) {
+      // Checking if the checkbox is a 'Van' or 'SUV'
+      if ((list.get(i).getAttribute("value").trim()
+          .equalsIgnoreCase("van"))
+          || (list.get(i).getAttribute("value").trim()
+              .equalsIgnoreCase("suv"))) {
+        // Print selection status to console
+        System.out.println("BEFORE: Is "
+            + list.get(i).getAttribute("value") + " selected? "
+            + list.get(i).isSelected());
+        // Check if the checkbox is selected
+        if (!(list.get(i).isSelected())) {
+          // Click the checkbox
+          list.get(i).click();
+          System.out.println("AFTER: Is "
+              + list.get(i).getAttribute("value") + " selected? "
+              + list.get(i).isSelected());
+        } else {
+          // Uncheck the checkbox
+          list.get(i).click();
+          System.out.println("AFTER: Is "
+              + list.get(i).getAttribute("value") + " selected? "
+              + list.get(i).isSelected());
+        }
+        System.out.println("Next...");
+      }
+    }
+    // Locate 'Sedan' checkbox using xPath
+    WebElement sedanCheckbox = driver.findElement(By
+        .xpath("//input[@name='vehicle5']"));
+    System.out.println("Trying to select and de-select Sedan checkbox...");
+    for (int i = 0; i < 2; i++) {
+      // Click the checkbox
+      sedanCheckbox.click();
+      // Print current status to console
+      System.out.println("Selection status of 'Sedan' checkbox: "
+          + sedanCheckbox.isSelected());
+    }
+    // Locate 'Magazines' radio button using cssSelector
+    WebElement magazinesRadioBtn = driver.findElement(By
+        .cssSelector("input[value='Magazines']"));
+    // Check if radio button is selected by default
+    if (magazinesRadioBtn.isSelected()) {
+      // Print message to console
+      System.out.println("Magazines radio button is selected by default");
+    } else {
+      // Click the radio button
+      magazinesRadioBtn.click();
+    }
+    
+  } //End of @Test
+
+  @After
+  public void tearDown() throws Exception {
+    // Close the Firefox browser
+    driver.close();
+  }
+}
+```
+
+## **输出**
+
+每行代码都提供了清晰的注释，使其易于说明。 执行测试用例后，eclipse IDE 控制台窗口的输出如下，
+
+![property file eclipse output](img/259ea2204c75dfa434e16dd2865ada9a.png)
+
+属性文件使自动化测试人员的生活成真，梦想成真。 由此证明！ 现在该尝试使用今天的概念了。 请务必戴好安全帽，以免碰到[例外](https://javabeginnerstutorial.com/core-java-tutorial/exception-handling-try-catch-java/)！ 还有一件事，我可以在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver/Property%20Files)中找到所有代码文件。 去看一下！
+
+再见！ 祝你有美好的一天！
--- a/docs/141.md
+++ b/docs/141.md
@@ -69,6 +69,45 @@

 第一步（也是第一步）是从[此处](https://logging.apache.org/log4j/1.2/download.html)下载 Apache Log4j JAR。 单击镜像的 zip 文件格式将导航到一个新页面，其中包含实际的镜像站点详细信息，可从该位置将 JAR 下载到本地计算机。

-![download Apache Log4j](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20657%20634'%3E%3C/svg%3E)
+![download Apache Log4j](img/4d0bd0a2cc1db2cb7f03718ef5c12931.png)

-<noscript><img alt="download Apache Log4j" class="alignnone size-full wp-image-14225" height="634" src="img/4d0bd0a2cc1db2cb7f03718ef5c12931.png" width="657"/><p>将下载文件夹的内容提取到特定位置。</p><h3>步骤 2：配置 Java 构建路径</h3><p>将 Log4j JAR 作为外部库添加到项目的构建路径。</p><p>让我们导航到本地计算机中提取下载的 JAR 的路径，并将其添加为外部 JAR。</p><p><img alt="JAR selection window" class="alignnone size-full wp-image-14226" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/2_JarSelection-1.jpg" height="318" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20502%20318'%3E%3C/svg%3E" width="502"/></p><noscript><img alt="JAR selection window" class="alignnone size-full wp-image-14226" height="318" src="img/c027190f02b422719b9633917ff29b9d.png" width="502"/><p>之前，我们已经多次看到此过程，因此，我不再重复（请参阅<a href="https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/">文章</a>的步骤 3）。</p><h3>步骤 3：建立必要的档案</h3><p>我们将创建 3 个文件。</p><p><strong> Log4j.properties </strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件-&gt;下一页</li><li>提供“文件名”作为“Log4j.properties”，然后点击“完成”</li><p>结果看起来像这样，</p><p><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/3_property-file-creation.jpg" height="186" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20323%20186'%3E%3C/svg%3E" width="323"/></p><noscript><img alt="Log4j.properties file creation" class="alignnone size-full wp-image-14227" height="186" src="img/e27b7184646bb1e673729341bb77e0f8.png" width="323"/><p>我现在已经忽略了三个额外的程序包，因为我出于编码目的创建了它们。</p><p><strong>日志文件</strong></p><li>右键单击“src”文件夹-&gt;新建-&gt;其他-&gt;常规-&gt;文件夹-&gt;下一页</li><li>提供“文件夹名称”作为“资源”</li><li>右键点击“资源”文件夹并创建两个文件</li><li>将这些文件命名为“system.log”和“test.log”</li><ol><li><strong> system.log </strong> – 将具有系统生成的所有日志</li><li><strong> test.log </strong> – 将包含由于用户提供的手动命令而生成的所有日志</li></ol><p><img alt="Log files created" class="alignnone size-full wp-image-14228" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/4_log-files.jpg" height="341" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20275%20341'%3E%3C/svg%3E" width="275"/></p><noscript><img alt="Log files created" class="alignnone size-full wp-image-14228" height="341" src="img/7dbb8f2542d3154b6359132207b4d7b9.png" width="275"/><p>现在，所有环境都已准备就绪，我们可以使用 Log4j 进行一些实验并生成日志。 与往常一样，将 JAR 放置在 GitHub <a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver">仓库</a>中。 让我们在即将发布的帖子中详细了解这一点。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10l-advanced-webdriver-using-log4j-part-2/" title="10l. Advanced WebDriver – Using Log4j Part 2"> 10 升。 高级 WebDriver – 使用 Log4j 第 2 部分</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+将下载文件夹的内容提取到特定位置。
+
+### 步骤 2：配置 Java 构建路径
+
+将 Log4j JAR 作为外部库添加到项目的构建路径。
+
+让我们导航到本地计算机中提取下载的 JAR 的路径，并将其添加为外部 JAR。
+
+![JAR selection window](img/c027190f02b422719b9633917ff29b9d.png)
+
+之前，我们已经多次看到此过程，因此，我不再重复（请参阅[文章](https://javabeginnerstutorial.com/selenium/9b-webdriver-eclipse-setup/)的步骤 3）。
+
+### 步骤 3：建立必要的档案
+
+我们将创建 3 个文件。
+
+**`Log4j.properties`**
+
+*   右键单击“`src`文件夹->新建->其他->常规->文件->下一页”
+*   提供“文件名”作为“`Log4j.properties`”，然后点击“完成”
+
+结果看起来像这样，
+
+![Log4j.properties file creation](img/e27b7184646bb1e673729341bb77e0f8.png)
+
+我现在已经忽略了三个额外的程序包，因为我出于编码目的创建了它们。
+
+**日志文件**
+
+*   右键单击“`src`文件夹->新建->其他->常规->文件夹->下一页”
+*   提供“文件夹名称”作为“`resource`”
+*   右键点击“`resource`”文件夹并创建两个文件
+*   将这些文件命名为“`system.log`”和“`test.log`”
+
+1.  **`system.log`** – 将具有系统生成的所有日志
+2.  **`test.log`** – 将包含由于用户提供的手动命令而生成的所有日志
+
+![Log files created](img/7dbb8f2542d3154b6359132207b4d7b9.png)
+
+现在，所有环境都已准备就绪，我们可以使用 Log4j 进行一些实验并生成日志。 与往常一样，将 JAR 放置在 GitHub [仓库](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver)中。 让我们在即将发布的帖子中详细了解这一点。
--- a/docs/142.md
+++ b/docs/142.md
@@ -179,6 +179,10 @@ Eclipse IDE 输出屏幕显示，
 *   “控制台”没有任何错误，并且
 *   “JUnit”窗格，带有绿色栏，显示成功执行测试用例

-![JUnit Output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20635%20318'%3E%3C/svg%3E)
+![JUnit Output](img/3d95ae1c1e99ed4e996edb2f746e0831.png)*   system.log 和 test.log 文件都将按预期方式通过属性文件布局中指定的系统日志和带有时间戳的用户编码日志进行更新。

-<noscript><img alt="JUnit Output" class="alignnone size-full wp-image-14235" height="318" src="img/3d95ae1c1e99ed4e996edb2f746e0831.png" width="635"/><li>system.log 和 test.log 文件都将按预期方式通过属性文件布局中指定的系统日志和带有时间戳的用户编码日志进行更新。</li><p><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/6_Test.log-file-1.jpg" height="188" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608%20188'%3E%3C/svg%3E" width="608"/></p><noscript><img alt="Generated Test.log file" class="alignnone size-full wp-image-14236" height="188" src="img/63ba29fc17dd09ce494e16026d76132f.png" width="608"/><p>代码文件，日志文件和相关的 JAR 一如既往地放置在<a href="https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver"> GitHub 仓库</a>中。 我希望您现在已经了解了如何在 Selenium WebDriver 自动化的测试用例中利用流行的记录器之一。</p><p>祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10m-advanced-webdriver-running-tests-in-headless-mode/" title="10m. Advanced WebDriver – Running tests in headless mode"> 10m。 Advanced WebDriver – 以无头模式运行测试</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+![Generated Test.log file](img/63ba29fc17dd09ce494e16026d76132f.png)
+
+代码文件，日志文件和相关的 JAR 一如既往地放置在 [GitHub 仓库](https://github.com/JBTAdmin/Selenium/tree/master/AdvancedWebDriver)中。 我希望您现在已经了解了如何在 Selenium WebDriver 自动化的测试用例中利用流行的记录器之一。
+
+祝你今天愉快！
--- a/docs/145.md
+++ b/docs/145.md
@@ -68,10 +68,66 @@ Vue 也可用于 unpkg，
 </html>
 ```

-代码很简单。 我们给页面命名为“`Hello Vue!`”。 以及`<head>`部分中使用带有`<script>`标签的 CDN 的 vue.js 的开发版本。 我们正在显示“`Hello World!`” `<body>`部分中带有`id=”app”`的`<div>`元素内`<h1>`标签内的消息。
+代码很简单。 我们给页面命名为“Hello Vue!”。 以及`<head>`部分中使用带有`<script>`标签的 CDN 的 vue.js 的开发版本。 我们正在显示“Hello World!” `<body>`部分中带有`id=”app”`的`<div>`元素内`<h1>`标签内的消息。

 Chrome 浏览器中的当前输出如下，

-![Initial code set up](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20873%20343'%3E%3C/svg%3E)
+![Initial code set up](img/48f184397978913cd4dba79a25f463b3.png)

-<noscript><img alt="Initial code set up" class="alignnone size-full wp-image-13684" height="343" sizes="(max-width: 873px) 100vw, 873px" src="img/48f184397978913cd4dba79a25f463b3.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/1_InitialCode.jpg 873w, https://javabeginnerstutorial.com/wp-content/uploads/2018/07/1_InitialCode-300x118.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/07/1_InitialCode-768x302.jpg 768w" width="873"/><p>到目前为止和我在一起？ 好的，我听到您说我们已经渲染了“Hello World！” 带有<code>&lt;h1&gt;</code>标签，但这与我们使用 Vue.js 进行显示的最初目标不矛盾吗？ <strong> <em>好问题。 </em> </strong></p><h2><strong>让我们现在回答，</strong></h2><h3><strong>步骤 1：创建新的 Vue 实例</strong></h3><p>我们已经使用<code>&lt;script&gt;</code>标签将 Vue.js 导入了我们的项目，但这并不能解决问题。 这相当于在我们的工作台上有一台笔记本电脑。 要打开它并完成一些工作，我们必须按下电源按钮。 同样，要在我们的项目中使用 Vue，我们必须使用<code>new</code>关键字创建 Vue 对象的实例。 这个实例是 Vue 的电源按钮！</p><pre><code class="language-javascript">new Vue();</code></pre><h3><strong>步骤 2：传递选项对象</strong></h3><p>仅创建实例只会为 Vue 供电。 但是我们想对 Vue 做更多的<em>。 为此，我们必须将选项或配置对象作为参数传递给刚创建的实例。 此选项对象具有 Vue 可以识别的一些保留属性，它们被指定为<strong>键值对</strong>。 顾名思义，并非所有属性都是必需的，可以在需要时指定。 通常，它们用于存储数据和执行某些操作。</em></p><p><strong>，例如 </strong>：“el”，“数据”，“方法”等。</p><pre><code class="language-javascript">new Vue({ options/config object });</code></pre><h3><strong>步骤 3：建立与 DOM 的连接</strong></h3><p>我们希望以某种方式获取对我们希望操纵的一部分 HTML 代码的控制。 在我们的例子中，它是带有<code>id</code>和“app”的<code>&lt;div&gt;</code>元素，因此我们可以通过 Vue 显示消息“Hello World”。</p><p>为了在 Vue 实例和 DOM 的一部分之间建立这种连接，以便可以根据我们的需要对其进行控制，我们有一个名为“el”的保留属性，该属性转换为<em>元素</em>。 此属性将字符串作为值指定为 CSS 选择器，即<code>id</code>的“# ”和“。” 对于<code>class</code>。</p><pre><code class="language-javascript">new Vue({ el: "#app" });</code></pre><p>通过此简单的代码行，我们现在将带有<code>id</code>的<code>&lt;div&gt;</code>元素，“app”及其内容链接到 Vue 实例。 它们现在<em>不可分割</em>！</p><h3><strong>步骤 4：指定我们的数据</strong></h3><p>为了存储我们要在此 Vue 实例及其链接的 DOM 中使用的所有数据/信息，我们还有一个保留的属性，称为“数据”。 与“el”不同，“数据”将对象作为其值。 由于我们要向 DOM 显示消息“Hello World”，因此让我们在“数据”对象中将其指定为键值对。</p><pre><code class="language-javascript">new Vue({ el: "#app", data: { message: "Hello World" } });</code></pre><h3><strong>步骤 5：将此数据呈现到 DOM </strong></h3><p>只需使用如下所示的两个大括号即可将 Vue 实例的数据对象中指定的值呈现到 DOM。 （有关更多信息，请参阅下一篇文章！）</p><pre><code class="language-html">&lt;div id="app"&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;/div&gt;</code></pre><p>为了区分上一个输出（没有 Vue），使用 Vue 来显示，请让我们显示“<strong> Hello World！ </strong>”而不是“Hello World！”。</p><p><img alt="Vue.js output" class="alignnone size-full wp-image-13685" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/07/2_FinalOutput.jpg" height="480" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20480'%3E%3C/svg%3E" width="983"/></p><noscript><img alt="Vue.js output" class="alignnone size-full wp-image-13685" height="480" src="img/6db1fd39a9ccc23d42cc746ed9c95ad8.png" width="983"/><p>好极了！ 因此，我们创建了第一个 Vue 应用。 <a href="https://github.com/JBTAdmin/vuejs/tree/master/01_Hello%20World%20with%20Vuejs"> GitHub repo </a>中提供了本文讨论的所有代码。</p><p>祝你有美好的一天！</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/2-template-syntax-reactivity/" title="2\. Template syntax and a glimpse into Reactivity"> 2.模板语法和反应性的一瞥</a></h5></div></div> </body> </html></noscript>
\ No newline at end of file
+到目前为止和我在一起？ 好的，我听到您说我们已经渲染了“Hello World！”带有`<h1>`标签，但这与我们使用 Vue.js 进行显示的最初目标不矛盾吗？ **好问题。**
+
+## **让我们现在回答，**
+
+### **步骤 1：创建新的 Vue 实例**
+
+我们已经使用`<script>`标签将 Vue.js 导入了我们的项目，但这并不能解决问题。 这相当于在我们的工作台上有一台笔记本电脑。 要打开它并完成一些工作，我们必须按下电源按钮。 同样，要在我们的项目中使用 Vue，我们必须使用`new`关键字创建 Vue 对象的实例。 这个实例是 Vue 的电源按钮！
+
+```javascript
+new Vue();
+```
+
+### **步骤 2：传递选项对象**
+
+仅创建实例只会为 Vue 供电。 但是我们想对 Vue 做更多的。 为此，我们必须将选项或配置对象作为参数传递给刚创建的实例。 此选项对象具有 Vue 可以识别的一些保留属性，它们被指定为**键值对**。 顾名思义，并非所有属性都是必需的，可以在需要时指定。 通常，它们用于存储数据和执行某些操作。
+
+**例如**：“`el`”，“`data`”，“`method`”等。
+
+```javascript
+new Vue({ options/config object });
+```
+
+### **步骤 3：建立与 DOM 的连接**
+
+我们希望以某种方式获取对我们希望操纵的一部分 HTML 代码的控制。 在我们的例子中，它是带有`id`和“`app`”的`<div>`元素，因此我们可以通过 Vue 显示消息“Hello World”。
+
+为了在 Vue 实例和 DOM 的一部分之间建立这种连接，以便可以根据我们的需要对其进行控制，我们有一个名为“`el`”的保留属性，该属性转换为*元素*。 此属性将字符串作为值指定为 CSS 选择器，即`id`的“`#`”和“`.`”对于`class`。
+
+```javascript
+new Vue({ el: "#app" });
+```
+
+通过此简单的代码行，我们现在将带有`id`的`<div>`元素，“`app`”及其内容链接到 Vue 实例。 它们现在*不可分割*！
+
+### **步骤 4：指定我们的数据**
+
+为了存储我们要在此 Vue 实例及其链接的 DOM 中使用的所有数据/信息，我们还有一个保留的属性，称为“`data`”。 与“`el`”不同，“`data`”将对象作为其值。 由于我们要向 DOM 显示消息“Hello World”，因此让我们在“数据”对象中将其指定为键值对。
+
+```javascript
+new Vue({ el: "#app", data: { message: "Hello World" } });
+```
+
+### **步骤 5：将此数据呈现到 DOM**
+
+只需使用如下所示的两个大括号即可将 Vue 实例的数据对象中指定的值呈现到 DOM。 （有关更多信息，请参阅下一篇文章！）
+
+```html
+<div id="app"> <h1>{{ message }}</h1> </div>
+```
+
+为了区分上一个输出（没有 Vue），使用 Vue 来显示，请让我们显示“**Hello World！**”而不是“Hello World！”。
+
+![Vue.js output](img/6db1fd39a9ccc23d42cc746ed9c95ad8.png)
+
+好极了！ 因此，我们创建了第一个 Vue 应用。 [GitHub 仓库](https://github.com/JBTAdmin/vuejs/tree/master/01_Hello%20World%20with%20Vuejs)中提供了本文讨论的所有代码。
+
+祝你有美好的一天！