If you want to do integration testing for the frontend application with Playwright, any simple requests work perfectly by class Route but every GraphQL requests is not easy to do like that because every requests send to a single path.

Absolutely, How to mock a single GraphQL path with many responses? That is the problem.

Let’s get started!

As you can see the GraphQL request use POST method on HTTP request with many payloads.

You can clarify 2 types of method below
1. query used for getting some data.
2. mutation using to mutate data on backend side.

The key is a operation name after GraphQL methods above. You need to declare every single request first before go the next steps.

Solution

In case, You need to intercept any POST method with specific path for GraphQL requests.

First, create functions to verify which are query or mutation with the request name.

Second, when a request name match, return a mock response instead of bypass the request to backend side.

Last, you can make a function for a request interception like this
image

And then you have it!

IMO, this solution worked but was not perfect. If you guys have any solutions, please advise me :)

จะว่าไปช่วงนี้ชาวกรุงฯอย่างเราประสบปัญหา BTS เสียกันถ้วนหน้า ทำให้หลายคนต้องไปทำงานสายทั้งๆที่เดินทางออกจากบ้านกันเวลาเดิม
แน่นอนครับ ผมก็เป็นหนึ่งในผู้ประสบปัญหานี้เหมือนกับคุณนั่นแหละ :(

อันที่จริงก็มีหลายวิธีด้วยกันที่ทำให้เราสามารถรับรู้สถานการณ์ของ BTS ณ ตอนนั้นเช่น

1. เปิด Twitter ของ BTS_SkyTrain
2. ฟัง จส. 100 เอา

จากตัวอย่างด้านบน เห็นไหมว่าเราต้องเป็นคนไปหาข้อมูลมาเอง ซึ่งมันก็หลายขั้นตอนอยู่
จะดีแค่ไหนกันถ้าคุณสามารถรับรู้ถึงสถานการณ์ของไอ้หนูด่วนได้จากไลน์ของคุณเองหละ

ในตัวอย่างนี้ผมเลือกที่จะนำ Tweet ของ BTS มาเป็นข้อความสำหรับแจ้งในไลน์ เพราะจากที่ดูแล้ว Account นี้ส่วนใหญ่เค้าก็ Tweet แต่เรื่องปัญหารถเสียนี่แหละ

สิ่งที่ต้องเตรียม

1. พระเอกของเราในบทความนี้ นั่นคือเจ้า IFTTT จะใช้งานบนคอมพิวเตอร์ หรือโหลดแอปฯมาก็ตามสะดวกครับ Sign up/Sign in กันให้เรียบร้อย
2. Twitter account
3. Line account ที่ Add Line Notify Bot แล้ว ซึ่งเราสามารถทำได้ง่ายๆแค่เพิ่มเค้าเป็นเพื่อนเหมือนคนอื่นๆ ดูรายละเอียดได้ทางนี้เลยครับ Line Notify Bot

ลงมือ!

บทความนี้ขอยกตัวอย่างการใช้งาน IFTTT บน iOS แบบคร่าวๆ
ซึ่งมีการข้ามขั้นตอนการ Sign in IFTTT, Twitter และ Line account เพื่อความสะดวกครับ

1. เปิดเจ้าแอปฯ IFTTT ขึ้นมา เลือกเมนู My Applets จากนั้นกดปุ่ม + ด้านบนขวา

2. จิ้มไปที่ this ตัวสีฟ้า

3. Search หา Twitter service ด้วยคำว่า Twitter จิ้มที่ Twitter service จากนั้นเลื่อนหา New tweet by a specific user แล้วก็จิ้มอีกที

4. ที่ช่อง Username to watch กรอก account ชื่อ BTS_SkyTrain จากนั้นกดปุ่ม Create trigger เป็นอันเสร็จขั้นตอนฝั่ง Twitter

จะเห็นว่าจาก this ในขั้นตอนที่ 2. เปลี่ยนเป็นโลโก้ Twitter แล้ว
ในขั้นตอนต่อไปให้เราเลือก that

5. Search Line service ด้วยคำว่า Line จากนั้นจิ้มไปที่ Line service จะเห็นได้ว่ามีเมนูให้เลือกอันเดียว ก็เลือกอันนี้แหละ

6. ในหน้า Setting ของ Line service นี้จะแบ่งเป็น 3 ส่วนด้วยกัน คือ

— Recipient เป็นจุดให้เลือกว่าเราจะส่งข้อความจากต้นทาง (Twitter) ไปที่ไหนในไลน์ ซึ่งในรูปจะเป็นการแชทแบบ 1–1 อธิบายง่ายๆก็คือ เราจะได้ข้อความนี้เพียงคนเดียวเท่านั้น

— Message เป็นตัวกำหนดรูปแบบข้อความของเรา ผมแนะนำให้ลบทุกอย่างจนเหลือแค่ TweetEmbedCode ก็เพียงพอแล้วครับ

— Photo URL เป็นการแนบรูปไปกับข้อความโดยที่ต้องใช้เป็น URL ของรูปที่เราต้องการ (ไม่ต้องใส่ก็ได้)

หลังจากทำทุกอย่างเสร็จเรียบร้อยแล้ว กดปุ่ม Create action

มาถึงขั้นตอนสุดท้ายกันแล้ว เราสามารถตั้งชื่อ Applet นี้ตามต้องการ ส่วนจะตั้งไม่ตั้งก็ตามใจเลยครับ เสร็จแล้วกด Finish เป็นอันเสร็จสิ้นขั้นตอนทั้งปวง

เรามาดูตัวอย่างการใช้งานจริงกันครับ ในรูปผมเลือก Recipient เป็น Line group ที่ชื่อว่า BTS Notify (ในกรณีถ้าเลือกเป็นกลุ่มแบบนี้เราต้อง Add Line Notify Bot เข้ามาในกลุ่มด้วยนะครับ)

ทุกๆครั้งที่ Twitter BTS_SkyTrain tweet ข้อความ ก็จะมีข้อความส่งมาใน Line group เราแบบนี้เลย
โดยจากที่ผมทดลองมาทั้งวัน ข้อความที่ส่งมาจะดีเลย์จาก Twitter อยู่บ้าง แต่ก็ไม่นานเกิน 10 นาทีครับ

สรุป

แนะนำให้ทุกคนทำติดตัวไว้เพื่อความอุ่นใจ จะได้หาช่องทางการโดยสารอื่นทันเวลาครับ :)
ส่วนเจ้า IFTTT เนี่ยมันยังสามารถนำไปประยุกต์ใช้ได้หลากหลายมากๆ ถ้ามีเวลาก็ลองไปจิ้มๆเล่นกันดูนะครับทุกคน