<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 远古大钟</title>
    <description>The latest articles on DEV Community by 远古大钟 (@goldenduo).</description>
    <link>https://dev.to/goldenduo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F901937%2F0b5b2fb1-6fc3-4c68-b133-e867b8f1ad16.png</url>
      <title>DEV Community: 远古大钟</title>
      <link>https://dev.to/goldenduo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/goldenduo"/>
    <language>en</language>
    <item>
      <title>Use TestCat to automatically control your phone via javascript</title>
      <dc:creator>远古大钟</dc:creator>
      <pubDate>Tue, 02 Aug 2022 08:35:00 +0000</pubDate>
      <link>https://dev.to/goldenduo/use-testcat-to-automatically-control-your-phone-via-javascript-26ag</link>
      <guid>https://dev.to/goldenduo/use-testcat-to-automatically-control-your-phone-via-javascript-26ag</guid>
      <description>&lt;p&gt;Today I will talk about how to use &lt;a href="https://github.com/goldenduo/TestCat"&gt;TestCat&lt;/a&gt; to automatically control your phone via javascript.&lt;/p&gt;

&lt;h1&gt;
  
  
  Preparation
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;Install &lt;a href="https://testcat.flyingcat.top/docs/R"&gt;TestCat&lt;/a&gt; from github.&lt;/li&gt;
&lt;li&gt;Prepare an Android phone and turn on the Android debugging mode. (&lt;a href="//devmode.md"&gt;How to turn on the Android debugging mode&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Open the TestCat, and connect the mobile phone and the computer PC through the data cable. Congrats, you're ready to test your cat!&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  Getting Started
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1. Preview
&lt;/h2&gt;

&lt;p&gt;Take a simple test case &lt;strong&gt;testing whack-a-mole&lt;/strong&gt; as an introductory example.(TestCat supports English and Chinese)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---A05W-Pv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.jsdelivr.net/gh/goldenduo/TestCat/R/demo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---A05W-Pv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn.jsdelivr.net/gh/goldenduo/TestCat/R/demo.gif" alt="Test cat and whack-a-mole test case" width="640" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. New project
&lt;/h2&gt;

&lt;p&gt;Click the 'File' button in the upper left corner, create a new project as shown below, and follow the prompts&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jQy1mB7Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/open_project.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jQy1mB7Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/open_project.png" alt="New project" width="704" height="253"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Partial screenshots
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;We pass the screenshot button on the upper right of the test cat device window&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QPn91gAS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/screenshot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QPn91gAS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/screenshot.png" alt="Screenshot button" width="855" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Take pictures of the three moles on the left, middle and right&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y1DxlpK6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y1DxlpK6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut.png" alt="Screenshot" width="419" height="819"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Name and save it, and the corresponding image will be generated in the image directory&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7fwvcmDa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7fwvcmDa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut2.png" alt="Screenshot" width="614" height="370"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pYl_6V6V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pYl_6V6V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://testcat.flyingcat.top/docs/R/cut3.png" alt="Screenshot" width="405" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Coding
&lt;/h2&gt;

&lt;p&gt;Let the TestCat continuously find out whether the mole appears on the screen of the mobile phone, and if it does, click on the location of the hamster and use the &lt;code&gt;cat.tap('xxx.png')&lt;/code&gt; interface. This interface will detect whether the corresponding picture appears on the current screen, if it appears, click it, otherwise nothing happens.&lt;/p&gt;

&lt;p&gt;Double-click &lt;code&gt;index.js&lt;/code&gt; in the project, add the following code, you can continuously test the whack-a-mole&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Left mole.png&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Middle mole.png&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Right mole.png&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;br&gt;
`&lt;/p&gt;

&lt;p&gt;The above code constantly checks whether the current display content of the mobile phone has a picture related to the mole, and if so, click the center point of the picture.&lt;/p&gt;

&lt;p&gt;congratulations! ! ! You have already fully started with the test cat~&lt;/p&gt;

&lt;h1&gt;
  
  
  More features
&lt;/h1&gt;

&lt;p&gt;The TestCat is more than this. For more info, please check the &lt;a href="https://testcat.flyingcat.top/docs/#/en/cat"&gt;API&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
