In the previous tutorial, we took a simple idea and turned it into an actionable automation workflow. Now, it’s time to actually build and run this workflow, so we can see how it works in practice.
Before we start building the workflow, let’s quickly recap what we’re going to do:
In the last article, we explored how to interpret the idea of "liking a TikTok video" and broke it down into small, manageable steps. In this tutorial, we'll actually build this automation and see it in action.
Workflow Overview
In this section, we’ll break down the workflow and explain the key steps involved in automating the task of liking a TikTok video. Understanding the logic behind each action is important, especially when it comes to conditions like checking whether the Like button is already pressed.
Here’s the workflow diagram:
At this stage, we need to check if the "Like" button has already been pressed. The condition for this is based on a specific attribute in the button’s HTML code — the fill attribute. When the Like button is clicked, the fill attribute of the svg element changes from "currentColor" to "none". This change is the key to determining whether the Like button has been activated (whether it is pressed or not).
How Do We Check the Like Button’s Status?
The fill attribute in the button’s source code indicates whether the button has been pressed. Here's how it works:
If fill="currentColor", the button has not been pressed, and we proceed to click it.
If fill="none", the button is already pressed, and we do nothing.
To locate the button in the source code, we use XPath to search for the button with this specific attribute.
Here’s the XPath to locate the button:
//div[@id="main-content-video_detail"]//span[@data-e2e="like-icon"]//*[local-name()='svg' and @fill='none']
This XPath locates the Like button by targeting the span with the data-e2e="like-icon" attribute and checks if the svg element’s fill attribute is set to "none", indicating that the button has been clicked.
If you’re unsure about XPath, don’t worry! Check out our XPath tutorial to learn how to effectively locate elements on web pages.
Let’s Build It – Step by Step
Now let’s roll up our sleeves and build this workflow, step by step. Follow along and don’t worry if this is your first time — you’ll get the hang of it quickly!
1. Start Octoparse AI and Create a New App Open the Octoparse AI client and create a new blank App. Don’t worry — the interface is simple and easy to navigate. If you ever get stuck, just ask for help!
2. Add the "Go to web page" Command First, we’ll drag and drop the "Open Web Page" command to the canva. In this step, you’ll input the video URL you want to automate.
3. Add the "If web page contains" Command to Check the Like Button’s Status Next, we need to check whether the Like button has already been pressed. Add an If condition to perform this check.
If the button is already pressed, the workflow will display a message: "You have already liked this video."
If the button has not been pressed, the workflow will proceed to the next step.
4. Add the "Click Element" Command If the Like button hasn’t been pressed, we’ll add a Click Element command. This will click the Like button to like the video, and we’ll display a message: "Successfully liked the video!"
The workflow shall look like this:
5. Save and Name Your Workflow After setting everything up, save the workflow and give it a name like "TikTok Video Liker"
Debug and Run
Now it’s time to run the workflow and see it in action. Let’s make sure everything is working properly before we kick things off.
Run the Workflow
Click Run Main Flow button on the top bar and watch the workflow in action! You should see it open the TikTok video, check the Like button, and either click it or display a message if it's already liked.
Adjust Wait Time (if needed)
Sometimes, the Like button might take a moment to load. If that happens, you can easily add a Wait command to ensure the page loads completely before checking the button.
Things to Check Before Running
Before you hit that Run button, let’s make sure everything is in place to ensure smooth execution:
Download and Install the Octoparse Main Client If you haven’t already, go ahead and download the Octoparse main client and install it on your machine. It’s easy to set up, and you’ll be ready to start automating right away!
Don’t worry — this is just a one-time setup!
Install the Browser Extension For web automation, you’ll need to install the Octoparse AI web automation extension in your browser (Chrome or Edge). This is crucial for interacting with web pages. Once installed, make sure it’s enabled in your browser.
Once set up, it works seamlessly every time you run a workflow.
Once everything is set up, you're ready to begin automating!
Try It Yourself
Now it’s your turn to take what you've learned and try it out on your own!
Try running the same workflow with a different Tiktok video link. Does it work as expected?
Feel adventurous? Explore using the "Follow" button on a TikTok video page as an alternative action. You’ll see how flexible the workflow can be!
By experimenting with different actions, you'll quickly become more confident in building and running your own workflows.
What’s Next?
In the next tutorial, we’ll show you how to run your workflow locally and view results. You’ll learn how to execute your workflow directly on your machine, view the results in real-time, and even export data if you need it. We'll demonstrate using a tutorial App from the Octoparse AI app store.
Stay tuned for more!